/*
 * Marketing Plan v2 — BtoBマーケティング施策一覧（/marketing-plan/）
 *
 * 正本: source/DESIGN_SYSTEM.md（v2）§2 タイポグラフィ / §5 コンポーネント / §11 Hard Rules
 *
 * 【重要 1】:root を定義しない。トークンは corporate-v2.css の .brand-v2 スコープから
 * 継承する。必ず corporate-v2.css の「後」に読み込むこと（DESIGN_SYSTEM.md §14-1）。
 *
 * 【重要 2】このページは seo-priority-pages.css（sp-*）と route 内 inline の mp-* という
 * 2 系統で出来ていた。sp-* のうち実際に使っているのは 24 クラスだけなので、
 * seo-priority-pages.css の読み込みをやめ、必要な sp-* をここで v2 として定義し直す。
 * クラス名は据え置き（本文 HTML と JS が 3,400 箇所以上で参照しているため）。
 *
 * 【重要 3】旧実装からの主な変更:
 *   - カード上辺の 4px グラデ帯を全廃（縁色は 4 辺すべて禁止・§11 NG#1）
 *   - ファネル 7 段階の 7 色（amber / blue / emerald / indigo / rose / purple / sky）を
 *     teal→blue のランプに置換（accent は teal・blue のみ・§1）
 *   - hover lift 5 箇所を廃止（§11 NG#5）
 *   - グラデ面塗り 19 箇所を廃止（§11 NG#8）。緑 #198a58 系のアクセントも廃止
 *   - backdrop-filter のガラス表現と、装飾用のぼかし玉（無限アニメ）を削除
 */

/* ============================================================
   0. ページ土台
   ============================================================ */

.mp-body,
.mp-body *,
.mp-body *::before,
.mp-body *::after {
  box-sizing: border-box;
}

.mp-body {
  margin: 0;
  font-family: var(--sans);
  background: var(--v2-bg);
  color: var(--ink);
}

.mp-body img { display: block; max-width: 100%; height: auto; }

/* 素タグ <section> / <h1> にグローバル CSS が当たらないよう明示的に潰す（AGENTS.md） */
.mp-body #marketing-plan-app section {
  position: static;
  padding: 0;
  background: transparent;
}

.mp-body #marketing-plan-app {
  position: relative;
  z-index: 0;
  margin: 0;
  line-height: 1.6;
  color: var(--ink);
}

.mp-body #marketing-plan-app * { box-sizing: border-box; }
.mp-body #marketing-plan-app .is-hidden { display: none !important; }

/* ============================================================
   1. レイアウト（sp-shell を v2 の器に合わせる）
   ============================================================ */

.mp-body .sp-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.mp-body .mp-shell {
  padding-top: 36px;
  padding-bottom: 88px;
}

.mp-body .sp-section { margin-top: 56px; }

/* 旧 sp-panel はガラス面＋影のパネルだった。v2 は囲いを減らして罫線で仕切る */
.mp-body .sp-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* ============================================================
   2. 見出し / ラベル（§2）
   ============================================================ */

.mp-body .sp-eyebrow,
.mp-body .sp-section-label,
.mp-body .sp-fact-label,
.mp-body .mp-panel-label,
.mp-body .mp-field-label,
.mp-body .mp-quick-label,
.mp-body .mp-sort-label,
.mp-body .mp-info-label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--v2-muted);
  background: none;
  padding: 0;
  margin: 0 0 12px;
}

.mp-body .sp-title {
  margin: 0 0 20px;
  font-size: clamp(29px, 4.3vw, 44px);
  font-weight: 800;
  line-height: 1.42;
  color: var(--ink);
}

.mp-body .sp-summary {
  max-width: 44em;
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--v2-muted);
}

.mp-body .sp-section-head { margin-bottom: 16px; }

.mp-body .sp-section-head h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--ink);
}

.mp-body .sp-section-intro {
  max-width: 44em;
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--v2-muted);
}

/* ============================================================
   3. ボタン（黒 ✦ CTA に統一・§5）
   ============================================================ */

.mp-body .sp-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s var(--ease-out), border-color .15s var(--ease-out);
}

.mp-body .sp-button-primary {
  background: var(--black);
  color: #fff;
}

.mp-body .sp-button-primary::before {
  content: "\2726";
  color: var(--teal);
  font-size: 1.35em;
  /* 星を大きくしてもボタンの高さを変えないよう、行ボックスは 13px 相当に抑える */
  line-height: .72;
  transition: transform .35s var(--ease-pop);
}

.mp-body .sp-button-primary:hover { background: var(--black-hover); }
.mp-body .sp-button-primary:hover::before { transform: rotate(90deg) scale(1.15); }

.mp-body .sp-button-secondary {
  border-color: #DCE2EB;
  background: #fff;
  color: var(--ink);
}

.mp-body .sp-button-secondary:hover { background: #FAFBFC; border-color: #B9C4D2; }

.mp-body .sp-button:focus-visible,
.mp-body .mp-chip:focus-visible,
.mp-body .mp-sort-chip:focus-visible,
.mp-body .mp-cat-nav-link:focus-visible,
.mp-body .mp-guide-link:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.mp-body .sp-hero-actions,
.mp-body .sp-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ============================================================
   4. ヒーロー
   ============================================================ */

.mp-body .sp-hero { padding: 8px 0 0; }
.mp-body .mp-hero-compact { display: block !important; }
.mp-body .mp-hero-compact .sp-hero-copy { max-width: 100%; }

.mp-body .mp-hero-side-panel {
  margin-top: 40px;
  padding: 32px 0 0;
  border-top: 1px solid var(--line);
}

.mp-body .mp-hero-side-panel h2 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--ink);
}

/* 手順リスト（囲いを外して罫線行に） */
.mp-body .mp-flow-list {
  list-style: none;
  counter-reset: flow;
  display: grid;
  gap: 0;
  margin: 18px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.mp-body .mp-flow-list li {
  position: relative;
  padding: 16px 4px 16px 46px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--v2-muted);
  transition: background .15s var(--ease-out);
}

.mp-body .mp-flow-list li:hover { background: #FAFBFC; }

.mp-body .mp-flow-list li::before {
  counter-increment: flow;
  content: counter(flow, decimal-leading-zero);
  position: absolute;
  left: 4px;
  top: 17px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--teal-d);
}

.mp-body .mp-flow-list strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}

.mp-body .mp-guide { margin-top: 28px; }

.mp-body .mp-guide-links,
.mp-body .mp-cat-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.mp-body .mp-cat-nav { margin: 0 0 20px; }

.mp-body .mp-guide-link,
.mp-body .mp-cat-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid #DCE2EB;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s var(--ease-out), border-color .15s var(--ease-out);
}

.mp-body .mp-guide-link:hover,
.mp-body .mp-cat-nav-link:hover { background: #FAFBFC; border-color: #B9C4D2; }

/* ============================================================
   5. フィルタ
   ============================================================ */

.mp-body .mp-controls {
  margin-top: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  position: relative;
  z-index: 5;
}

.mp-body #mp-filter-section { padding: 0 !important; }

.mp-body .mp-controls-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.mp-body .mp-controls-title {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--ink);
}

.mp-body .mp-controls-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.mp-body .mp-copy-btn {
  white-space: nowrap;
  min-height: 32px;
  padding: 0 14px;
  font-size: 12px;
}

.mp-body .mp-field-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
}

.mp-body .mp-field-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  position: relative;
  min-width: 0;
  background: #fff;
  border: 1px solid #DCE2EB;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .15s var(--ease-out);
}

.mp-body .mp-field-group:hover { border-color: #B9C4D2; }
.mp-body .mp-field-group:focus-within { border-color: var(--teal); }

.mp-body .mp-field-group-search { grid-column: 1 / -1; }
.mp-body .mp-field-span-4 { grid-column: span 4; }

.mp-body .mp-field-label {
  padding: 8px 14px 0;
  margin: 0;
  line-height: 1;
}

.mp-body .mp-search-box { position: relative; }

.mp-body .mp-search-box .mp-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--v2-muted);
  pointer-events: none;
}

.mp-body .mp-search-box .mp-field { padding-left: 36px; }

.mp-body .mp-field {
  min-height: 36px;
  width: 100%;
  /* <select> は最長 option を min-content に持つため、これが無いと grid 内で縮まない */
  max-width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 !important;
  padding: 4px 14px 8px;
}

.mp-body .mp-field:focus { outline: 0; box-shadow: none; }
.mp-body .mp-field::placeholder { color: var(--faint); font-weight: 500; }

.mp-body select.mp-field {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235E6B82' fill='none' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.mp-body .mp-secondary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.mp-body .mp-control-subpanel {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.mp-body .mp-control-subpanel p { display: none; }

.mp-body .mp-quick-label,
.mp-body .mp-sort-label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.mp-body .mp-quick-filters,
.mp-body .mp-sort-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ============================================================
   6. チップ
   ファネル 7 段階は「順序のあるカテゴリ」なので、色で段階が読めること自体には
   意味がある。ただし旧実装は amber / blue / emerald / indigo / rose / purple / sky の
   7 色で、v2 の「accent は teal・blue のみ・配分 5% 以下」（§1）と競合していた。
   teal → blue の 7 段ランプに置き換え、順序の情報だけ残す。
   面は淡色・文字は濃色でコントラスト比 4.5:1 以上（§11 NG#4）。
   ============================================================ */

.mp-body .mp-chip,
.mp-body .mp-sort-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #E8EBF0;
  color: #333D4D;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1;
  margin: 0 !important;
  transition: background .15s var(--ease-out), color .15s var(--ease-out), border-color .15s var(--ease-out);
}

.mp-body .mp-chip:hover,
.mp-body .mp-sort-chip:hover { border-color: #B9C4D2; }

/* 選択中は黒（サイト共通の主操作色） */
.mp-body .mp-chip.is-active,
.mp-body .mp-sort-chip.is-active {
  border-color: var(--black);
  background: var(--black);
  color: #fff;
}

/* teal → blue の 7 段ランプ（ファネルの順序） */
.mp-body .mp-chip[data-why-chip="戦略設計"]   { background: #DCF5EF; color: #05463D; }
.mp-body .mp-chip[data-why-chip="認知"]       { background: #D9F2F1; color: #05463F; }
.mp-body .mp-chip[data-why-chip="リード獲得"] { background: #D7EFF3; color: #05424A; }
.mp-body .mp-chip[data-why-chip="商談獲得"]   { background: #D6ECF6; color: #063E52; }
.mp-body .mp-chip[data-why-chip="受注"]       { background: #D5E9F8; color: #073A59; }
.mp-body .mp-chip[data-why-chip="継続・拡大"] { background: #D6E6FA; color: #08365F; }
.mp-body .mp-chip[data-why-chip="基盤最適化"] { background: #D8E3FB; color: #0A3266; }

/* 選択中は段階に関わらず黒に揃える */
.mp-body .mp-chip[data-why-chip].is-active { background: var(--black); color: #fff; }

.mp-body .mp-chip[data-reset-chip="1"] {
  background: #fff;
  border-color: #DCE2EB;
  color: var(--v2-muted);
}

.mp-body .mp-chip[data-reset-chip="1"].is-active {
  border-color: var(--black);
  background: var(--black);
  color: #fff;
}

.mp-body .mp-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.mp-body .mp-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: none;
}

.mp-body .mp-stat dt {
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--faint);
}

/* 件数は実データなので等幅（§4） */
.mp-body .mp-stat dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ink);
}

/* ============================================================
   7. 結果ビュー / 施策カード
   ============================================================ */

.mp-body .mp-results-intro { margin-top: 56px; }

.mp-body .mp-view {
  margin: 18px 0 0 !important;
  padding: 0 !important;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.mp-body .mp-card-grid,
.mp-body .mp-cat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

/*
 * 旧実装はカード上辺に 4px のカテゴリ別グラデ帯を敷いていた。
 * v2 はカードの縁に色を付けること自体が 4 辺とも禁止（§11 NG#1・v1 の top 例外は廃止）。
 * カテゴリはカード内のチップで示す。
 */
.mp-body .mp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 20px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  transition: border-color .15s var(--ease-out), background .15s var(--ease-out);
}

.mp-body .mp-card::before { content: none; }
.mp-body .mp-card:hover { border-color: #C9D2DF; background: #FAFBFC; }

.mp-body .mp-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.mp-body .mp-tag-why,
.mp-body .mp-tag-how {
  display: inline-block;
  padding: 4px 9px;
  border: 0;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .02em;
}

.mp-body .mp-tag-why { background: #DCF5EF; color: #054F43; }
.mp-body .mp-tag-how { background: #E4EEFA; color: #17457C; }

.mp-body .mp-card-title {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.6;
  color: var(--ink);
}

.mp-body .mp-card-info {
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-sub);
}

.mp-body .mp-info-row {
  display: block;
  min-height: 70px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.mp-body .mp-info-row:not(.is-desc):nth-child(odd) { border-right: 1px solid var(--line); }

.mp-body .mp-info-row:not(.is-desc):nth-child(3),
.mp-body .mp-info-row:not(.is-desc):nth-child(4) { border-bottom: none; }

.mp-body .mp-info-label { margin: 0 0 6px; }

.mp-body .mp-info-value {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
  word-break: break-word;
}

.mp-body .mp-info-row.is-desc {
  grid-column: 1 / -1;
  min-height: auto;
  padding: 14px;
  border-top: 1px solid var(--line);
  border-bottom: none;
  background: #fff;
}

.mp-body .mp-info-row.is-desc .mp-info-label {
  margin-bottom: 8px;
  text-transform: none;
  letter-spacing: .06em;
}

.mp-body .mp-info-row.is-desc .mp-info-value {
  color: var(--v2-muted);
  font-weight: 500;
  line-height: 1.8;
}

.mp-body .mp-card-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--faint);
}

.mp-body .mp-vendor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.mp-body .mp-vendor-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #DCE2EB;
  border-radius: 12px;
  background: #fff;
  color: var(--v2-muted);
  font-size: 11.5px;
  font-weight: 600;
  transition: background .15s var(--ease-out), border-color .15s var(--ease-out);
}

.mp-body .mp-vendor-tag:hover { background: #FAFBFC; border-color: #B9C4D2; }

.mp-body .mp-empty {
  margin: 18px 0 0;
  padding: 32px 28px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-sub);
  color: var(--v2-muted);
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
}

/* ============================================================
   8. カテゴリ節
   ============================================================ */

.mp-body .mp-cat-section {
  margin-top: 44px;
  scroll-margin-top: 200px;
}

.mp-body .mp-cat-section:first-child { margin-top: 0; }

/* 旧実装は 3px のカテゴリ別カラー下線。罫線 1 本に統一する */
.mp-body .mp-cat-heading {
  margin: 0 0 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--ink);
}

.mp-body .mp-cat-intro {
  margin: 0 0 18px;
  max-width: 52em;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--v2-muted);
}

/* ============================================================
   9. 使い方ガイド / Key Facts / FAQ / 末尾 CTA
   ============================================================ */

.mp-body .mp-usage-guide { margin-top: 56px; }

.mp-body .mp-usage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

.mp-body .mp-usage-block {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.mp-body .mp-usage-block h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--ink);
}

.mp-body .mp-usage-block p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--v2-muted);
}

.mp-body .sp-fact-grid {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.mp-body .sp-fact-card {
  padding: 14px 2px;
  border-bottom: 1px solid var(--line);
}

.mp-body .sp-fact-card strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
}

.mp-body .sp-fact-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--v2-muted);
}

.mp-body .sp-grid {
  display: grid;
  gap: 16px;
}

.mp-body .sp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.mp-body .sp-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  transition: border-color .15s var(--ease-out), background .15s var(--ease-out);
}

.mp-body .sp-card:hover { border-color: #C9D2DF; background: #FAFBFC; }

.mp-body .sp-card h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--ink);
}

.mp-body .sp-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--v2-muted);
}

.mp-body .mp-faq-section { margin-top: 56px; }

.mp-body .mp-faq-list {
  display: grid;
  gap: 0;
  margin-top: 18px;
  border-top: 1px solid var(--line);
}

.mp-body .mp-faq-item {
  padding: 18px 2px;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.mp-body .mp-faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.7;
  color: var(--ink);
}

.mp-body .mp-faq-item summary::-webkit-details-marker { display: none; }

.mp-body .mp-faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230FA893' fill='none' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform .3s var(--ease-out);
}

.mp-body .mp-faq-item[open] summary::after { transform: rotate(180deg); }

.mp-body .mp-faq-item p {
  margin: 12px 0 0;
  padding-right: 36px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--v2-muted);
}

.mp-body .mp-faq-item a { color: var(--teal-d); font-weight: 700; }

/* 旧実装は緑グラデ塗りのパネル（§11 NG#8）。罫線 1 本で仕切る */
.mp-body .sp-cta,
.mp-body .mp-cta {
  margin-top: 64px;
  margin-bottom: 8px;
  padding: 48px 0 0 !important;
  border: 0;
  border-top: 1px solid var(--line) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.mp-body .sp-cta h2 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--ink);
}

.mp-body .sp-cta p {
  margin: 0 0 20px;
  max-width: 44em;
  font-size: 14px;
  line-height: 1.9;
  color: var(--v2-muted);
}

/* ============================================================
   10. 登場モーション（§6 / WCAG 2.2.2）
   旧実装の装飾ぼかし玉（無限アニメ）は削除。入場の fade-up だけ残す。
   ============================================================ */

@keyframes mp-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .mp-body .sp-hero,
  .mp-body .mp-controls,
  .mp-body .mp-results-intro,
  .mp-body .mp-view,
  .mp-body .mp-usage-guide,
  .mp-body .mp-faq-section,
  .mp-body .mp-cta {
    animation: mp-fade-up .35s var(--ease-out) both;
  }

  .mp-body .mp-controls { animation-delay: .06s; }
  .mp-body .mp-results-intro { animation-delay: .12s; }
  .mp-body .mp-view { animation-delay: .16s; }
  .mp-body .mp-usage-guide { animation-delay: .20s; }
  .mp-body .mp-faq-section { animation-delay: .24s; }
  .mp-body .mp-cta { animation-delay: .28s; }
}

/* ============================================================
   11. レスポンシブ
   ============================================================ */

@media (max-width: 1180px) {
  .mp-body .mp-field-span-4 { grid-column: span 6; }
  .mp-body .mp-secondary-row { flex-direction: column; gap: 10px; }
  .mp-body .mp-control-subpanel { flex-wrap: wrap; }
  .mp-body .sp-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .mp-body .sp-shell { padding: 0 20px; }
  .mp-body .mp-shell { padding-top: 24px; padding-bottom: 72px; }

  .mp-body .mp-field-layout { grid-template-columns: 1fr; gap: 8px; }

  .mp-body .mp-field-group-search,
  .mp-body .mp-field-span-4 { grid-column: auto; }

  .mp-body .mp-controls { padding: 16px; }

  .mp-body .mp-card-grid,
  .mp-body .mp-cat-cards,
  .mp-body .mp-usage-grid,
  .mp-body .sp-grid-3 { grid-template-columns: 1fr; }

  .mp-body .mp-card { padding: 18px; }
  .mp-body .mp-card-info { grid-template-columns: 1fr; }
  .mp-body .mp-info-row:not(.is-desc):nth-child(odd) { border-right: none; }
  .mp-body .mp-info-row:not(.is-desc):nth-child(3) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 560px) {
  .mp-body .mp-controls-head { flex-direction: column; align-items: stretch; gap: 8px; }
  .mp-body .mp-controls-actions { justify-content: stretch; }
  .mp-body .mp-copy-btn { width: 100%; }
}