/* 出力先: プラグイン connect-i-motion/assets/cis-motion.css
   対象  : TOP の AIO セクション / KOUKINO 要約セクション / AIO 専用ページ
   更新  : 2026-10-21
   方針  : docs/26 §6「情報の層」
           グラデーション・発光・過剰な角丸/カード/影・中央揃え基調を使わない
           色は既存ブランド 4 色のみ。新色を追加しない */

.cis-scope {
  --cis-navy: #00243D;
  --cis-blue: #007ECA;        /* 罫線・枠・SVG の線など、文字以外に使う */
  --cis-blue-text: #0074BA;   /* 文字と、白文字の下地に使う。白地で 4.99:1（AA 4.5 を満たす）
                                 #007ECA は白地で 4.34:1 となり小さい文字では基準未満のため */
  --cis-cyan: #74D8EC;
  --cis-pale: #F2FDFF;
  --cis-ink: #141A1F;
  --cis-sub: #5C6B78;
  --cis-rule: #DCE4EA;
  --cis-white: #FFFFFF;
  /* 和文は Web フォントを足さない。游ゴシックは Regular が細いため Medium を明示する */
  --cis-jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", YuGothic, "Noto Sans JP", system-ui, sans-serif;
  --cis-en: "Roboto", var(--cis-jp);

  font-family: var(--cis-jp);
  color: var(--cis-ink);
  line-height: 1.9;
  letter-spacing: .02em;
  font-feature-settings: "palt" 1;
}

.cis-scope *,
.cis-scope *::before,
.cis-scope *::after { box-sizing: border-box; }

.cis-wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

.cis { padding: 88px 0; border-top: 1px solid var(--cis-rule); }

.cis__label {
  font-family: var(--cis-en);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--cis-blue-text);
  font-weight: 600;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cis__label::after { content: ""; flex: 1; height: 1px; background: var(--cis-rule); }

/* 既存サイトに h2{font-size:32px} があるため上書きする */
.cis h2 {
  font-size: 30px;
  line-height: 1.55;
  margin: 0 0 20px;
  font-weight: 600;
  letter-spacing: 0;
  max-width: 20em;
  text-align: left;
  word-break: auto-phrase;
}
.cis h3 { font-size: 17px; line-height: 1.7; margin: 0 0 8px; font-weight: 600; }
.cis p { margin: 0 0 1.1em; max-width: 30em; }
.cis .cis-lead { font-size: 17px; }
.cis .cis-note { font-size: 13.5px; color: var(--cis-sub); line-height: 1.85; }

/* ---- CTA: 線で構成し、面で塗りすぎない ---- */
.cis-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 32px; }
.cis-cta a {
  font-size: 15px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 9px;
  transition: background .18s, color .18s, border-color .18s;
}
.cis-cta a.is-primary { background: var(--cis-navy); color: var(--cis-white); padding: 14px 24px; }
.cis-cta a.is-primary:hover { background: var(--cis-blue-text); }
.cis-cta a.is-plain { color: var(--cis-navy); border-bottom: 1px solid var(--cis-navy); padding: 3px 2px; }
.cis-cta a.is-plain:hover { color: var(--cis-blue-text); border-color: var(--cis-blue-text); }
.cis-cta a:focus-visible { outline: 2px solid var(--cis-blue-text); outline-offset: 3px; }

/* ================= 器の図（2.5D） ================= */
.cis-vessel { margin: 46px 0 0; perspective: 1600px; }
.cis-vessel__inner {
  transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg));
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.cis-vessel__src {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px;
  padding: 0 0 16px; border-bottom: 1px solid var(--cis-rule);
}
.cis-vessel__src b { font-size: 14.5px; font-weight: 600; }
.cis-vessel__src span { font-size: 13px; color: var(--cis-sub); }

.cis-vessel__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.cis-vessel__col { padding: 26px 26px 24px; border-right: 1px solid var(--cis-rule); }
.cis-vessel__col:first-child { padding-left: 0; }
.cis-vessel__col:last-child { border-right: 0; padding-right: 0; }
.cis-vessel__kind {
  font-size: 11.5px; letter-spacing: .06em; color: var(--cis-sub);
  border: 1px solid var(--cis-rule); padding: 3px 9px; display: inline-block; margin: 0 0 12px;
}
.cis-vessel__col--own .cis-vessel__kind { color: var(--cis-blue-text); border-color: var(--cis-blue); }
.cis-vessel svg { display: block; width: 100%; height: auto; margin: 4px 0 16px; }
.cis-vessel dl { margin: 0; font-size: 13.5px; line-height: 1.85; }
.cis-vessel dt {
  font-family: var(--cis-en); font-size: 10.5px; letter-spacing: .1em;
  font-weight: 600; color: var(--cis-sub); margin: 12px 0 2px;
}
.cis-vessel dd { margin: 0; color: var(--cis-ink); }
.cis-vessel__col--own dt { color: var(--cis-blue-text); }

.cis-vessel__sum {
  border-top: 1px solid var(--cis-rule); padding: 22px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
}
.cis-vessel__sum span { font-size: 12.5px; color: var(--cis-sub); padding: 0 26px; position: relative; }
.cis-vessel__sum span:first-child { padding-left: 0; }
.cis-vessel__sum span::before {
  content: ""; position: absolute; top: -22px; left: 26px;
  width: 1px; height: 14px; background: var(--cis-cyan);
}
.cis-vessel__sum span:first-child::before { left: 0; }

.cis-vessel__join {
  margin: 18px 0 0; padding: 16px 20px; background: var(--cis-pale);
  font-size: 14.5px; line-height: 1.85; color: var(--cis-ink);
}
.cis-vessel__join b { color: var(--cis-navy); }
.cis-vessel figcaption { margin-top: 14px; font-size: 12.5px; color: var(--cis-sub); line-height: 1.8; }

/* ---- 立体ホバーは重要な3枚だけ。影もここだけ ---- */
.cis-lift {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--cis-rule); margin-top: 34px;
}
.cis-lift__item {
  padding: 28px 26px 30px; background: var(--cis-white);
  transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s;
}
@media (hover: hover) {
  .cis-lift__item:hover {
    transform: perspective(900px) rotateX(var(--lx, 0deg)) rotateY(var(--ly, 0deg)) translateZ(4px);
    box-shadow: 0 16px 30px -16px rgba(0, 36, 61, .3);
    position: relative; z-index: 1;
  }
}
.cis-lift__item:focus-within { outline: 2px solid var(--cis-blue-text); outline-offset: -2px; }
/* ---- STEP: 紺の帯は1セクションだけ ---- */
.cis-steps { background: var(--cis-navy); color: var(--cis-white); border-top: 0; }
.cis-steps h2 { color: var(--cis-white); }
.cis-steps .cis__label { color: var(--cis-cyan); }
.cis-steps .cis__label::after { background: rgba(255, 255, 255, .22); }
.cis-steps p { color: rgba(255, 255, 255, .82); }
.cis-steps__list { counter-reset: s; margin: 34px 0 0; padding: 0; list-style: none; }
.cis-steps__item {
  counter-increment: s; display: grid; grid-template-columns: 76px 1fr; gap: 24px;
  padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, .16);
}
.cis-steps__item:last-child { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.cis-steps__item::before {
  content: "STEP " counter(s); font-family: var(--cis-en); font-size: 11px;
  font-weight: 600; letter-spacing: .1em; color: var(--cis-cyan); padding-top: 6px;
}
.cis-steps__item h3 { color: var(--cis-white); margin: 0 0 4px; }
.cis-steps__item p { margin: 0; font-size: 14.5px; max-width: 34em; }

/* 初期状態は「見えている」。JS が IntersectionObserver を使えると確認したときだけ待機させる。
   JS 無効・IO 非対応・JS 実行前のいずれでも本文が読める */
.cis-steps__list.is-ready .cis-steps__item {
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}
.cis-steps__list.is-ready .cis-steps__item.is-in { opacity: 1; transform: none; }

/* ---- KOUKINO 要約セクションの 1 行版 ---- */
.cisk__row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin: 34px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--cis-rule);
}
.cisk__row li { padding: 20px 24px 22px; border-right: 1px solid var(--cis-rule); border-bottom: 1px solid var(--cis-rule); }
.cisk__row li:first-child { padding-left: 0; }
.cisk__row li:last-child { border-right: 0; padding-right: 0; padding-left: 24px; background: var(--cis-pale); }
.cisk__row b { display: block; font-size: 15px; margin-bottom: 8px; }
.cisk__kind {
  display: inline-block; font-size: 11.5px; color: var(--cis-sub);
  border: 1px solid var(--cis-rule); padding: 2px 8px; margin-bottom: 8px;
}
.cisk__row li.is-own .cisk__kind { color: var(--cis-blue-text); border-color: var(--cis-blue); }
.cisk__role { display: block; font-size: 13.5px; color: var(--cis-sub); }

/* ---- 演出を一括で止めるためのクラス ---- */
.cis-no-fx .cis-vessel__inner { transform: none !important; }
.cis-no-fx .cis-lift__item:hover { transform: none !important; box-shadow: none !important; }
.cis-no-fx .cis-steps__list.is-ready .cis-steps__item { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .cis-vessel__inner,
  .cis-lift__item,
  .cis-steps__list.is-ready .cis-steps__item { transition: none !important; transform: none !important; }
  .cis-steps__list.is-ready .cis-steps__item { opacity: 1 !important; }
}

@media (max-width: 1024px) {
  .cis h2 { font-size: 26px; }
  .cis-lift { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .cis { padding: 56px 0; }
  .cis h2 { font-size: 22px; line-height: 1.6; }
  .cis-vessel__cols { grid-template-columns: 1fr; }
  .cis-vessel__col { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--cis-rule); }
  .cis-vessel__col:last-child { border-bottom: 0; padding-bottom: 4px; }
  .cis-vessel svg { max-width: 280px; }
  .cis-vessel__sum { grid-template-columns: 1fr; gap: 10px; }
  .cis-vessel__sum span { padding: 0 0 0 14px; }
  .cis-vessel__sum span::before { top: 4px; left: 0; width: 6px; height: 1px; }
  .cis-steps__item { grid-template-columns: 1fr; gap: 6px; }
  .cis-steps__item::before { padding-top: 0; }
  .cisk__row { grid-template-columns: 1fr; }
  .cisk__row li { padding: 18px 0; border-right: 0; }
  .cisk__row li:last-child { padding-left: 16px; padding-right: 16px; }
  .cis-sp-hide { display: none; }
}

/* ================= Elementor 上書き対策（2026-10-21 追記） =================
   Elementor の HTML ウィジェット内では、次の 2 つの Elementor 側ルールが本文側を打ち消すため、
   詳細度を上げて元の見え方に戻す。Elementor 以外のページでは同じ値なので影響しない。
   1) .elementor .elementor-widget:not(...):not(...) figure { margin: 0 }  -> 器の図の上余白 46px が 0 になる
   2) .elementor a { text-decoration: none }                              -> 本文中の素のリンクの下線が消える */
.cis-scope .cis-vessel { margin-top: 46px !important; }
.cis-scope a:not([class]) { text-decoration: underline; }

/* ================= 命名のずれの吸収（2026-10-21 追記） =================
   HTML は class="wrap" / "lead" / "note" を使う。HTML は変更せず、.cis-scope 配下に限って
   既存の .cis-wrap / .cis .cis-lead / .cis .cis-note と同じ見た目を当てる。
   一般的すぎる名前なので、必ず .cis-scope の子孫セレクタとして書き、単独では書かない */
.cis-scope .wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.cis-scope .cis .lead { font-size: 17px; }
.cis-scope .cis .note { font-size: 13.5px; color: var(--cis-sub); line-height: 1.85; }

/* ================= AIO 専用ページ /service/hp/ai-search/（2026-10-21 追記） =================
   移植元: code/snippets/ai-search-page-wireframe.html の <style>（レビュー用の .review 系は移さない） */
.cis-scope a:not([class]) { color: var(--cis-blue-text); }
.cis-scope .cis h1 {
  font-size: 38px; line-height: 1.5; margin: 0 0 24px;
  font-weight: 600; letter-spacing: 0;
}
.cis-scope .cis h2.is-wide { max-width: 26em; }
.cis-scope .cis h3 { word-break: auto-phrase; }

/* ---- ヒーロー: 左揃え。パンくず＋H1＋リード ---- */
.cis-scope .cis-hero { border-top: 0; padding: 56px 0 88px; }
.cis-scope .cis .cis-crumb { font-size: 12.5px; color: var(--cis-sub); margin: 0 0 36px; max-width: none; }
.cis-scope .cis .cis-crumb a { color: var(--cis-sub); text-decoration: none; border-bottom: 1px solid var(--cis-rule); }
.cis-scope .cis .cis-crumb a:hover { color: var(--cis-blue-text); border-color: var(--cis-blue); }
.cis-scope .cis-crumb span { margin: 0 8px; }

/* ---- H2-1: 罫線区切りの3カラム ---- */
.cis-scope .cis-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 40px; border-top: 1px solid var(--cis-rule); }
.cis-scope .cis-roles__col { padding: 26px 26px 24px; border-right: 1px solid var(--cis-rule); }
.cis-scope .cis-roles__col:first-child { padding-left: 0; }
.cis-scope .cis-roles__col:last-child { border-right: 0; padding-right: 0; }
.cis-scope .cis-roles__col--own h3 { color: var(--cis-navy); }
.cis-scope .cis-roles dl { margin: 0; font-size: 14.5px; line-height: 1.85; }
.cis-scope .cis-roles dt {
  font-family: var(--cis-en); font-size: 10.5px; letter-spacing: .1em; font-weight: 600;
  color: var(--cis-sub); margin: 14px 0 2px;
}
.cis-scope .cis-roles__col--own dt { color: var(--cis-blue-text); }
.cis-scope .cis-roles dd { margin: 0; }
.cis-scope .cis .cis-join { margin: 0; padding: 16px 20px; background: var(--cis-pale); font-size: 14.5px; line-height: 1.85; max-width: none; }
.cis-scope .cis-join b { color: var(--cis-navy); }

/* ---- H2-2: 左揃えの本文のみ。補足は左罫線 ---- */
.cis-scope .cis-prose p { max-width: 32em; }
.cis-scope .cis-prose .cis-prose__caveat {
  margin: 30px 0 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--cis-blue);
  font-size: 15.5px; line-height: 1.9; max-width: 34em;
}

/* ---- H2-3: 2×2 グリッド（1px の罫線で区切る。影・角丸なし） ---- */
.cis-scope .cis-q { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--cis-rule); border: 1px solid var(--cis-rule); margin: 34px 0 0; }
.cis-scope .cis-q__item { background: var(--cis-white); padding: 28px 30px 30px; }
.cis-scope .cis-q__item h3 { font-size: 16.5px; margin: 0 0 14px; }
.cis-scope .cis-q__item dl { margin: 0; font-size: 14px; line-height: 1.85; }
.cis-scope .cis-q__item dt {
  font-family: var(--cis-en); font-size: 10.5px; letter-spacing: .1em; font-weight: 600;
  color: var(--cis-blue-text); margin: 0 0 2px;
}
.cis-scope .cis-q__item dd { margin: 0; color: var(--cis-ink); }

/* ---- 表（H2-4 は全幅、H2-5 は2列） ---- */
.cis-scope .cis-table { width: 100%; border-collapse: collapse; margin: 34px 0 0; font-size: 14.5px; line-height: 1.8; }
.cis-scope .cis-table caption { text-align: left; font-size: 12.5px; color: var(--cis-sub); padding: 0 0 10px; caption-side: top; }
.cis-scope .cis-table th,
.cis-scope .cis-table td { text-align: left; vertical-align: top; padding: 18px 20px 18px 0; border-bottom: 1px solid var(--cis-rule);
  /* 文字色を継承に任せない。Elementor キットの既定文字色（白地で約 4.4:1）が
     td に当たると AA 4.5:1 を下回るため、自前のトークンで明示する */
  color: var(--cis-ink); }
.cis-scope .cis-table thead th {
  font-family: var(--cis-en); font-size: 11px; letter-spacing: .1em; font-weight: 600; color: var(--cis-sub);
  border-bottom: 1px solid var(--cis-ink); padding-top: 0; padding-bottom: 10px;
}
.cis-scope .cis-table tbody th { font-weight: 600; white-space: nowrap; }
.cis-scope .cis-table tbody th small { display: block; font-weight: 400; font-size: 11.5px; color: var(--cis-sub); white-space: normal; }
.cis-scope .cis-table td:last-child { padding-right: 0; }
.cis-scope .cis-table--2col { max-width: 46em; }
.cis-scope .cis-table--2col th,
.cis-scope .cis-table--2col td { width: 50%; }
.cis-scope .cis-table--2col .is-topic th { padding: 22px 0 6px; border-bottom: 0; font-size: 14.5px; white-space: normal; }
.cis-scope .cis-table--2col .is-topic th small { display: inline; margin-left: 8px; }
.cis-scope .cis-table--2col .is-check td { padding-top: 6px; color: var(--cis-sub); }
.cis-scope .cis-tbc {
  display: inline-block; font-size: 12.5px; color: var(--cis-blue-text); border: 1px solid var(--cis-blue);
  padding: 1px 9px; line-height: 1.7;
}

/* ---- H2-6: 定義リスト ---- */
.cis-scope .cis-faq { margin: 34px 0 0; border-top: 1px solid var(--cis-rule); }
.cis-scope .cis-faq__row { display: grid; grid-template-columns: 5fr 7fr; gap: 0 40px; padding: 24px 0; border-bottom: 1px solid var(--cis-rule); }
.cis-scope .cis-faq dt { font-weight: 600; font-size: 15.5px; line-height: 1.75; }
.cis-scope .cis-faq dd { margin: 0; font-size: 14.5px; line-height: 1.9; }
.cis-scope .cis-faq dd p { max-width: 34em; margin: 0; }

/* ---- H2-7: 紺の帯（このページで唯一）。左に本文・右に CTA ---- */
.cis-scope .cis-close { background: var(--cis-navy); color: var(--cis-white); border-top: 0; }
.cis-scope .cis-close h2 { color: var(--cis-white); }
.cis-scope .cis-close .cis__label { color: var(--cis-cyan); }
.cis-scope .cis-close .cis__label::after { background: rgba(255, 255, 255, .22); }
.cis-scope .cis-close p { color: rgba(255, 255, 255, .82); }
/* 下線は border-bottom で引く（text-decoration を足すと二重になる） */
.cis-scope .cis-close a.cis-close__link { color: var(--cis-white); border-bottom: 1px solid var(--cis-cyan); text-decoration: none; }
.cis-scope .cis-close a.cis-close__link:hover { color: var(--cis-cyan); }
.cis-scope .cis-close__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 0 64px; align-items: start; }
.cis-scope .cis-close__side { border-left: 1px solid rgba(255, 255, 255, .22); padding: 4px 0 4px 40px; }
.cis-scope .cis-close__side p { font-size: 14px; max-width: 22em; }
.cis-scope .cis-close .cis-cta { margin-top: 20px; flex-direction: column; align-items: flex-start; gap: 18px; }
.cis-scope .cis-close .cis-cta a.is-primary { background: var(--cis-cyan); color: var(--cis-navy); }
.cis-scope .cis-close .cis-cta a.is-primary:hover { background: var(--cis-white); }
.cis-scope .cis-close .cis-cta a.is-plain { color: var(--cis-white); border-color: var(--cis-cyan); }
.cis-scope .cis-close .cis-cta a.is-plain:hover { color: var(--cis-cyan); }
.cis-scope .cis-close .cis-cta a:focus-visible { outline-color: var(--cis-cyan); }

/* ================= KOUKINO 要約セクション（2026-10-21 追記） =================
   移植元: docs/29-koukino-section-design-2026-10-21.md §4 の <style>
   .cisk__row / __kind / __role は上の章で定義済みのため重複させない。
   書体は .cis-scope が持つので .cisk には書かない */
.cis-scope .cisk { color: var(--cis-ink); line-height: 1.9; letter-spacing: .02em; }
.cis-scope .cisk__label {
  font-family: var(--cis-en); font-size: 12px; letter-spacing: .14em; color: var(--cis-blue-text);
  font-weight: 600; margin: 0 0 14px; display: flex; align-items: center; gap: 10px;
}
.cis-scope .cisk__label::after { content: ""; flex: 1; height: 1px; background: var(--cis-rule); }
.cis-scope .cisk__h { font-size: 30px; line-height: 1.55; margin: 0 0 20px; font-weight: 600; max-width: 20em; text-align: left; }
.cis-scope .cisk__body p { margin: 0 0 1.1em; max-width: 30em; font-size: 16px; }
.cis-scope .cisk__note { font-size: 13.5px; color: var(--cis-sub); margin: 14px 0 0; }
.cis-scope .cisk__cta { margin: 28px 0 0; }
.cis-scope .cisk__cta a {
  display: inline-flex; align-items: center; gap: 9px; background: var(--cis-navy); color: var(--cis-white);
  text-decoration: none; font-size: 15px; padding: 14px 24px; transition: background .18s;
}
.cis-scope .cisk__cta a:hover { background: var(--cis-blue-text); }
.cis-scope .cisk__cta a:focus-visible { outline: 2px solid var(--cis-blue-text); outline-offset: 3px; }

/* ================= 上記 3 章のレスポンシブ（2026-10-21 追記） ================= */
@media (max-width: 1024px) {
  .cis-scope .cis h1 { font-size: 32px; }
  .cis-scope .cisk__h { font-size: 26px; }
  .cis-scope .cis-roles { grid-template-columns: 1fr; }
  .cis-scope .cis-roles__col,
  .cis-scope .cis-roles__col:first-child,
  .cis-scope .cis-roles__col:last-child { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--cis-rule); }
  .cis-scope .cis-roles__col:last-child { border-bottom: 0; }
  .cis-scope .cis-q { grid-template-columns: 1fr; }
  .cis-scope .cis-faq__row { grid-template-columns: 1fr; gap: 8px; }
  .cis-scope .cis-close__grid { grid-template-columns: 1fr; gap: 28px; }
  .cis-scope .cis-close__side { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .22); padding: 24px 0 0; }
}

@media (max-width: 767px) {
  .cis-scope .cis-hero { padding: 32px 0 56px; }
  .cis-scope .cis-crumb { margin-bottom: 24px; }
  .cis-scope .cis h1 { font-size: 26px; }
  .cis-scope .cisk__h { font-size: 22px; line-height: 1.6; }
  .cis-scope .cis-q__item { padding: 22px 20px 24px; }
  .cis-scope .cis-table--wide thead { display: none; }
  .cis-scope .cis-table--wide,
  .cis-scope .cis-table--wide tbody,
  .cis-scope .cis-table--wide tr,
  .cis-scope .cis-table--wide th,
  .cis-scope .cis-table--wide td { display: block; width: 100%; }
  .cis-scope .cis-table--wide tr { padding: 18px 0; border-bottom: 1px solid var(--cis-rule); }
  .cis-scope .cis-table--wide th,
  .cis-scope .cis-table--wide td { border-bottom: 0; padding: 0 0 10px; }
  .cis-scope .cis-table--wide td::before {
    content: attr(data-label); display: block; font-family: var(--cis-en); font-size: 10.5px;
    letter-spacing: .1em; font-weight: 600; color: var(--cis-blue-text); margin-bottom: 2px;
  }
  .cis-scope .cis-table--2col th,
  .cis-scope .cis-table--2col td { width: 50%; }
  .cis-scope .cis-table--2col td { padding-right: 12px; }
  .cis-scope .cis-table--2col .is-topic th small { display: block; margin-left: 0; }
  .cis-scope .cis-close__side { padding-top: 20px; }
}

/* ================= キーボードフォーカスの可視化（2026-10-21 追記） =================
   当初は .cis-cta と .cis-lift にしか focus スタイルが無く、パンくず・本文中のリンク・
   表内のリンクなど 8 箇所でフォーカス位置が見えなかった。
   .cis-scope 配下のすべての操作可能要素に、確実に見える輪郭を与える。
   :focus-visible を使うため、マウス操作では出ない。 */
.cis-scope a:focus-visible,
.cis-scope button:focus-visible,
.cis-scope [tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--cis-blue-text);
  outline-offset: 3px;
}

/* 紺地の上では青い輪郭が沈むため、白に切り替える */
.cis-scope .cis-steps a:focus-visible,
.cis-scope .cis-close a:focus-visible {
  outline-color: var(--cis-white);
}

/* ================= AIO ページ 比較図リデザイン（2026-10-21 追記） =================
   狙い: 比較図を主役にする／左右の余白が間延びして見える問題を直す／
         スマートフォンの見出しを語句単位で自然に折る。
   制約: Elementor の要素設定は一切変えない。すべて .cis-scope 配下の CSS だけで解決する */

/* 和文を語句単位で折る。ハード <br> に頼らないため、スマートフォンでも破綻しない */
/* 既定値: word-break:auto-phrase に未対応のブラウザ（Safari など）でも破綻させない。
   - overflow-wrap:normal で Google / KOUKINO などの欧文を語中で割らせない
   - line-break:strict で行頭・行末の禁則を厳格に適用する
   - text-wrap:balance / pretty で行長を揃え、最終行だけ極端に短くなるのを防ぐ */
.cis-scope .cis h1,
.cis-scope .cis h2,
.cis-scope .cis-pull__q {
  word-break: normal; overflow-wrap: normal; line-break: strict; text-wrap: balance;
}
.cis-scope .cis-hero__sub,
.cis-scope .cis-crumb {
  word-break: normal; overflow-wrap: normal; line-break: strict; text-wrap: pretty;
}

/* 対応ブラウザ（Chromium 119+）では語句単位の改行へ切り替える。
   balance と併用すると挙動が読みにくくなるため、こちらでは解除する */
@supports (word-break: auto-phrase) {
  .cis-scope .cis h1,
  .cis-scope .cis h2,
  .cis-scope .cis-pull__q,
  .cis-scope .cis-hero__sub,
  .cis-scope .cis-crumb { word-break: auto-phrase; text-wrap: wrap; }
}
.cis-scope .cis-br-pc { display: inline; }

/* ---- 親コンテナ（Elementor の boxed 幅）を越えて広げる ----
   図版セクションだけに使う。本文は従来どおり .wrap の中に置いたままにする */
.cis-scope .cis-bleed {
  width: min(1320px, calc(100vw - 48px));
  margin-left: 50%;
  transform: translateX(-50%);
}

/* ---- ファーストビュー: 7:5 の非対称 2 カラム ---- */
.cis-scope .cis-hero { padding: 48px 0 76px; }
.cis-scope .cis-hero__grid {
  display: grid; grid-template-columns: 7fr 5fr; gap: 0 72px; align-items: center;
}
.cis-scope .cis-hero .cis__label { margin-bottom: 18px; }
.cis-scope .cis-hero h1 {
  font-size: clamp(30px, 3.1vw, 46px); line-height: 1.42; font-weight: 700;
  letter-spacing: -.01em; margin: 0 0 22px; max-width: 15em;
}
.cis-scope .cis-hero__sub {
  font-size: 17px; line-height: 1.95; color: var(--cis-sub); max-width: 26em; margin: 0;
}
.cis-scope .cis-hero__cta { margin-top: 34px; }
.cis-scope .cis-hero__fig { margin: 0; }
.cis-scope .cis-hero__fig svg { display: block; width: 100%; height: auto; }
.cis-scope .cis-hero__fig figcaption {
  margin-top: 16px; font-size: 12.5px; line-height: 1.75; color: var(--cis-sub);
  max-width: 20em;
}

/* ---- 図版の共通パーツ（SVG の色は必ずトークンから取る） ---- */
.cis-scope .f-edge { fill: none; stroke: var(--cis-rule); stroke-width: 1.5; }
.cis-scope .f-bar { fill: #E4EAEF; }
.cis-scope .f-edge-own { fill: none; stroke: var(--cis-blue); stroke-width: 2; }
.cis-scope .f-bar--own { fill: var(--cis-pale); stroke: #CFEAF3; stroke-width: 1; }
.cis-scope .f-dash { fill: none; stroke: var(--cis-blue); stroke-width: 2; stroke-dasharray: 6 6; }
.cis-scope .f-text {
  font-family: var(--cis-jp); font-size: 13px; fill: var(--cis-sub); text-anchor: middle;
}
.cis-scope .f-text--own { font-size: 13.5px; fill: var(--cis-navy); text-anchor: start; }

/* ---- 比較図: 1fr 1fr 1.45fr の非対称。公式サイト列を主役にする ---- */
.cis-scope .cis-roles-sec__lead { max-width: 34em; }
.cis-scope .cis-roles-sec__lead b { color: var(--cis-navy); }
.cis-scope .cis-fig {
  display: grid; grid-template-columns: 1fr 1fr 1.45fr; gap: 0;
  margin-top: 44px; border-top: 1px solid var(--cis-rule);
}
.cis-scope .cis-fig__col { padding: 30px 32px 32px; border-right: 1px solid var(--cis-rule); }
.cis-scope .cis-fig__col:first-child { padding-left: 0; }
.cis-scope .cis-fig__col:last-child { border-right: 0; padding-right: 0; }
.cis-scope .cis-fig__col--own { background: rgba(242,253,255,.6); box-shadow: inset 0 2px 0 var(--cis-blue); }
.cis-scope .cis-fig__col h3 { font-size: 17px; margin: 0 0 6px; }
.cis-scope .cis-fig__col--own h3 { color: var(--cis-navy); }
.cis-scope .cis-fig__role { font-size: 13.5px; color: var(--cis-sub); margin: 0 0 22px; }
.cis-scope .cis-fig__col--own .cis-fig__role { color: var(--cis-blue-text); font-weight: 600; }
.cis-scope .cis-fig__art svg { display: block; width: 100%; height: auto; }
/* 左2列は「同じ枠」を示すので、縮尺を揃える。列の padding 差で実寸がずれるのを防ぐ */
.cis-scope .cis-fig__col:not(.cis-fig__col--own) .cis-fig__art { max-width: 318px; }

.cis-scope .cis-fig__spec { margin: 26px 0 0; font-size: 15px; line-height: 1.85; }
.cis-scope .cis-fig__spec dt {
  font-family: var(--cis-en); font-size: 11.5px; letter-spacing: .09em; font-weight: 600;
  color: var(--cis-sub); margin-top: 15px;
}
.cis-scope .cis-fig__spec dt:first-child { margin-top: 0; }
.cis-scope .cis-fig__spec dd { margin: 0; color: var(--cis-ink); }
.cis-scope .cis-fig__col--own .cis-fig__spec dt { color: var(--cis-blue-text); }
.cis-scope .cis-fig__col--own .cis-fig__spec dd { font-weight: 600; color: var(--cis-navy); }

/* ---- 重要コピー: 右に寄せた非対称配置。ここだけ文字を大きく取る ---- */
.cis-scope .cis-pull {
  margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; align-items: start;
}
.cis-scope .cis-pull__q {
  margin: 0; font-size: clamp(22px, 2.1vw, 31px); line-height: 1.62; font-weight: 700;
  color: var(--cis-navy); letter-spacing: -.01em;
  border-left: 3px solid var(--cis-cyan); padding-left: 24px;
}
.cis-scope .cis-pull__a { margin: 0; font-size: 15px; line-height: 2; color: var(--cis-sub); }
.cis-scope .cis-pull__a b { color: var(--cis-ink); }
.cis-scope .cis-pull__cta { margin-top: 26px; }

/* ---- セクション間の余白: 図版セクションだけ前後を広く取り、流れを切らない ---- */
.cis-scope .cis-roles-sec { padding: 92px 0 96px; }

@media (max-width: 1024px) {
  .cis-scope .cis-hero__grid { grid-template-columns: 1fr; gap: 36px 0; }
  .cis-scope .cis-hero__fig { max-width: 420px; }
  .cis-scope .cis-hero h1 { max-width: none; }
  .cis-scope .cis-fig { grid-template-columns: 1fr; border-top: 0; }
  .cis-scope .cis-fig__col,
  .cis-scope .cis-fig__col:first-child,
  .cis-scope .cis-fig__col:last-child {
    padding: 28px 0; border-right: 0; border-top: 1px solid var(--cis-rule);
  }
  .cis-scope .cis-fig__col--own { background: none; border-top-color: var(--cis-blue); }
  .cis-scope .cis-fig__art,
  .cis-scope .cis-fig__col:not(.cis-fig__col--own) .cis-fig__art { max-width: 460px; }
  .cis-scope .cis-pull { grid-template-columns: 1fr; gap: 26px 0; }
  .cis-scope .cis-roles-sec { padding: 64px 0 68px; }
}

@media (max-width: 767px) {
  /* 見出しはモバイル専用サイズ。ハード <br> は出さず、語句単位の自然な折り返しに任せる */
  .cis-scope .cis-hero { padding: 28px 0 44px; }
  .cis-scope .cis-hero h1 { font-size: 27px; line-height: 1.5; letter-spacing: 0; }
  .cis-scope .cis-hero__sub { font-size: 15.5px; line-height: 1.9; }
  .cis-scope .cis-br-pc { display: none; }
  .cis-scope .cis-hero__cta { margin-top: 26px; gap: 16px; }
  /* ヒーローの CTA だけを対象にする。ここを .cis-cta で書くと TOP セクションなど
     既存の CTA ボタンの padding まで変わってしまう（2026-10-21 実測で検出し修正） */
  .cis-scope .cis-hero .cis-cta a.is-primary { padding: 13px 20px; }

  /* 図版: 縦積み。本文は 16px 前後まで上げて読めるようにする */
  .cis-scope .cis-bleed { width: auto; margin-left: 0; transform: none; }
  .cis-scope .cis-fig__col h3 { font-size: 16.5px; }
  .cis-scope .cis-fig__role { font-size: 14px; margin-bottom: 18px; }
  .cis-scope .cis-fig__spec { font-size: 15.5px; line-height: 1.85; }
  .cis-scope .cis-fig__spec dt { font-size: 11px; }
  .cis-scope .cis-fig__art,
  .cis-scope .cis-fig__col:not(.cis-fig__col--own) .cis-fig__art { max-width: none; }
  /* SVG 内の文字は viewBox 基準なので、横幅が縮むぶん実寸が小さくなる。拡大して 16px 相当にする */
  .cis-scope .f-text { font-size: 15px; }
  .cis-scope .f-text--own { font-size: 15px; }

  .cis-scope .cis-pull { margin-top: 44px; }
  .cis-scope .cis-pull__q { font-size: 21px; line-height: 1.66; padding-left: 16px; }
  .cis-scope .cis-pull__a { font-size: 15px; }
  .cis-scope .cis-roles-sec { padding: 52px 0 56px; }
  .cis-scope .cis-roles-sec__lead { font-size: 15.5px; }
}

/* 図版の注記は SVG の外に置く。SVG 内の文字は viewBox 基準で実寸が幅に依存するため、
   幅が変わっても一定の大きさで読めるよう HTML 側に出している */
.cis-scope .cis-fig__note {
  margin: 14px 0 0; font-size: 14px; line-height: 1.7; color: var(--cis-sub);
}
.cis-scope .cis-fig__note--own { color: var(--cis-blue-text); font-weight: 600; }
@media (max-width: 767px) {
  .cis-scope .cis-fig__note { font-size: 15.5px; }
}