/* ============================================================
     ▼ /service/crm-design/ ─ CRM戦略設計
     ============================================================ */

  /* パンくず */
  .crumb{background:var(--white);border-bottom:1px solid var(--n300);padding:11px 0}
  .crumb ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;
            font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--n500)}
  .crumb a{text-decoration:none;color:var(--b600)}
  .crumb li+li::before{content:"／";margin-right:8px;color:var(--n300)}

  /* 目的ブロック */
  .goal{background:var(--white);border:1px solid var(--n300);border-top:2px solid var(--b600);
        padding:24px clamp(18px,2.6vw,30px) 26px;margin-top:34px}
  .goal.g2{border-top-color:var(--acc)}
  .goal .gnum{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;
              font-weight:700;letter-spacing:.16em;color:var(--b600);margin:0 0 10px}
  .goal .gnum .ic{width:17px;height:17px}
  .goal.g2 .gnum{color:var(--acc-ink)}
  .goal h3{font-family:var(--serif);font-size:clamp(17px,2.2vw,21px);font-weight:700;
           letter-spacing:.04em;margin:0 0 12px;line-height:1.6}
  .goal p{margin:0 0 12px;font-size:13.5px;font-weight:500;color:var(--n700);line-height:1.95}
  .goal .kpi{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;
             background:var(--b50);color:var(--b700);padding:7px 13px;margin-top:4px}
  .goal.g2 .kpi{background:#FDF4E2;color:var(--acc-ink)}

  /* 3つの面 */
  .faces{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px}
  /* 面ごとに下地の色を変える。上流（薄い）→ 下流（金）で、進むほど濃くなる */
  .face{background:var(--white);border:1px solid var(--n300);border-top:2px solid var(--b400);
        padding:19px 18px;height:100%}
  .face.f1{background:var(--b50);border-top-color:var(--b400)}
  .face.f2{background:var(--b100);border-top-color:var(--b600)}
  .face.f3{background:#FDF4E2;border-top-color:var(--acc)}
  .face.f3 .fk{color:var(--acc-ink)}
  .face.f3 li{border-color:#E7D3A6}
  .face .fk{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;
            font-weight:700;letter-spacing:.16em;color:var(--b600);margin:0 0 2px}
  .face .fk .ic{width:15px;height:15px}
  /* 面のカードは1枚ずつ見せる。
     クラス名は .trio を避けること ── 既存スタイルの .trio が
     display:grid / 3カラム を持っていて、カルーセルが3列に割れてしまう */
  .carou.cface .face{min-height:236px}
  .face h4{font-family:var(--serif);font-size:16px;font-weight:700;letter-spacing:.03em;margin:7px 0 11px}
  .face ul{list-style:none;margin:0 0 13px;padding:0;display:flex;flex-wrap:wrap;gap:5px}
  .face li{font-size:12px;font-weight:500;padding:5px 11px;border:1px solid var(--n300);color:var(--n900);background:rgba(255,255,255,.65)}
  .face dl{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;margin:0;font-size:12px}
  .face dt{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--n700);padding-top:2px}
  .face dd{margin:0;font-weight:500;color:var(--n900);line-height:1.75}
  @media (max-width:900px){.faces{grid-template-columns:1fr}}

  /* 6マス */
  .matrix{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
  .matrix th,.matrix td{border:1px solid var(--n300);padding:13px 14px;vertical-align:top;text-align:left}
  /* 見出しは面（横）＝濃紺、目的（縦）＝その一段明るい青。
     6マスの中身は白のまま残して、軸だけを立てる */
  /* 罫線は全セル共通の1本に揃える。塗った見出しの上でも境界が消えないよう、
     border-color は上書きしない（濃紺の上ではグレーの線がはっきり見える） */
  .matrix thead th{background:var(--b800);color:#fff;font-family:var(--mono);font-size:10px;font-weight:700;
                   letter-spacing:.12em;text-align:center}
  .matrix thead th:first-child{background:var(--b900)}
  .matrix tbody th{background:var(--b600);color:#fff;width:136px;font-family:var(--serif);font-size:14.5px;
                   font-weight:700;letter-spacing:.04em;line-height:1.6}
  .matrix tbody th .gs{display:block;font-family:var(--mono);font-size:9px;font-weight:700;
                       letter-spacing:.14em;color:var(--b200);margin-bottom:5px}
  .matrix td b{display:block;font-size:12.5px;font-weight:700;color:var(--n900);margin-bottom:4px}
  .matrix td span{font-size:12.5px;font-weight:500;color:var(--n700);line-height:1.8}
  .matrix td.hi{background:#FDF9EF}
  .matrix td .tag{display:inline-block;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;
                  padding:2px 7px;margin-bottom:6px;background:var(--b600);color:#fff}
  .matrix td.sub .tag{background:var(--n300);color:var(--n700)}
  .matrix td.hi .tag{background:var(--acc);color:#1A1405}
  @media (max-width:760px){
    .matrix,.matrix tbody,.matrix tr,.matrix td,.matrix th{display:block;width:auto}
    .matrix thead{display:none}
    .matrix tbody th{width:auto}
    .matrix tbody th .gs{display:inline;margin:0 8px 0 0}
    .matrix td{border-top:none}
    .matrix td::before{content:attr(data-face);display:block;font-family:var(--mono);font-size:9px;
                       font-weight:700;letter-spacing:.14em;color:var(--b600);margin-bottom:7px}
    .matrix tr+tr{margin-top:14px;display:block}
  }

  /* 制約と最大化 */
  /* クラス名は .opt を避ける（既存スタイルの .opt が罫線と余白を持っている） */
  .optrow{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;margin-top:8px}
  .optbox{background:var(--white);border:1px solid var(--n300);padding:17px 19px}
  .optbox .k{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;
             color:var(--n500);margin:0 0 8px}
  .optbox.max{border-color:var(--b600);border-top:2px solid var(--b600)}
  .optbox.max .k{color:var(--b600)}
  .optbox p{margin:0;font-size:13.5px;font-weight:700;line-height:1.9}
  .optrow .arrow{font-family:var(--mono);font-size:11px;color:var(--n500);white-space:nowrap}
  @media (max-width:760px){.opt{grid-template-columns:1fr}.optrow .arrow{text-align:center}}

  /* チャネル比較表 */

  /* A / B の分岐 */
  .ab{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
  .abbox{background:var(--white);border:1px solid var(--n300);padding:19px 20px}
  .abbox .k{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--b600);margin:0 0 7px}
  .abbox h4{font-family:var(--serif);font-size:16px;font-weight:700;margin:0 0 9px;letter-spacing:.03em}
  .abbox p{margin:0;font-size:13px;font-weight:500;color:var(--n700);line-height:1.85}
  .abpick{display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding:13px 15px;
          background:#FDF4E2;border-left:3px solid var(--acc);font-size:13.5px;font-weight:700;line-height:1.85}
  .abpick .ic{color:var(--acc-ink);width:16px;height:16px;margin-top:4px;flex:none}
  @media (max-width:760px){.ab{grid-template-columns:1fr}}

  /* チェック */
  .checks{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .chk{background:var(--white);border:1px solid var(--n300);padding:18px 19px;display:flex;gap:12px}
  .chk .box{flex:none;width:17px;height:17px;border:1.5px solid var(--b400);margin-top:3px}
  .chk .k{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;color:var(--b600);display:block;margin-bottom:6px}
  /* 濃紺の帯の上に白いカードを置いているので、文字色を明示的に戻す
     （指定しないと .band-deep の淡い文字色を継いで読めなくなる） */
  .chk h4{font-family:var(--serif);font-size:15px;font-weight:700;margin:0 0 6px;
          line-height:1.65;letter-spacing:.03em;color:var(--n900)}
  .chk{color:var(--n900)}
  .chk p{margin:0;font-size:12.5px;font-weight:500;color:var(--n700);line-height:1.8}
  @media (max-width:760px){.checks{grid-template-columns:1fr}}

  /* FAQ */
  .faq{border-top:1px solid var(--n300)}
  .faq details{border-bottom:1px solid var(--n300)}
  .faq summary{cursor:pointer;list-style:none;padding:17px 40px 17px 30px;position:relative;
               font-family:var(--serif);font-size:15.5px;font-weight:700;letter-spacing:.03em;line-height:1.7}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::before{content:"Q";position:absolute;left:0;top:17px;font-family:var(--mono);
                       font-size:13px;font-weight:700;color:var(--b600)}
  .faq summary::after{content:"";position:absolute;right:8px;top:25px;width:9px;height:9px;
                      border-right:1.6px solid var(--b400);border-bottom:1.6px solid var(--b400);
                      transform:rotate(45deg);transition:transform .25s}
  .faq details[open] summary::after{transform:rotate(-135deg)}
  .faq .a{padding:0 8px 20px 30px;margin:0;font-size:13.5px;font-weight:500;color:var(--n700);line-height:1.95}

  /* 関連 */
  .rel{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .rel a{background:var(--white);border:1px solid var(--n300);padding:17px 18px;text-decoration:none;
         display:flex;flex-direction:column;gap:7px;transition:border-color .25s}
  .rel a:hover{border-color:var(--b400)}
  .rel .k{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.14em;color:var(--b600)}
  .rel h4{font-family:var(--serif);font-size:14.5px;font-weight:700;margin:0;line-height:1.65;letter-spacing:.03em}
  .rel p{margin:0;font-size:12px;font-weight:500;color:var(--n700)}
  @media (max-width:880px){.rel{grid-template-columns:1fr}}

  /* 図（このページ用） */
  .fig{width:100%;height:auto;display:block;margin:6px 0 4px}
  .fig text{font-family:var(--sans);font-size:12px;font-weight:700;fill:var(--n900)}
  .fig .sm{font-size:11px;font-weight:500;fill:var(--n700)}
  .fig .mono{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;fill:var(--n700)}
  .fig .bx{fill:var(--white);stroke:var(--n300);stroke-width:1.4}
  .fig .bxb{fill:var(--b50);stroke:var(--b600);stroke-width:1.8}
  .fig .bxa{fill:#FDF4E2;stroke:var(--acc);stroke-width:1.8}
  .fig .ln{stroke:var(--n500);stroke-width:1.5;fill:none}
  .fig .lnb{stroke:var(--b600);stroke-width:2.2;fill:none}
  .fig .wave{stroke:var(--b600);stroke-width:2.4;fill:none;stroke-linecap:round}
  .fig .grid{stroke:var(--n300);stroke-width:1}
  .fig .dot{fill:var(--acc)}
  .figcap{margin:4px 0 0;font-size:12.5px;color:var(--n700);line-height:1.85}

  /* ============================================================
     ▼ CRM戦略設計ページ v2 ─ 読みやすさのための追加
        ① 章番号つきの見出し　② 止める一行　③ 追従する目次
        ④ 図のアニメーション　⑤ 6マスを選ばせる　⑥ 注記の格下げ
     ============================================================ */

  /* ---------- ① 章見出し ---------- */
  .chap{display:flex;align-items:baseline;gap:13px;margin:0 0 13px}
  .chap .n{font-family:var(--mono);font-size:clamp(24px,3.4vw,34px);font-weight:700;
           color:var(--b300);line-height:1;letter-spacing:.02em}
  .chap .t{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--b600)}
  .band-deep .chap .n{color:var(--acc)}
  .band-deep .chap .t{color:#fff}
  section.in .chap .n{animation:chapIn .8s cubic-bezier(.2,.75,.25,1) both}
  @keyframes chapIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  /* ---------- ② 止める一行 ---------- */
  .stop{font-family:var(--serif);font-weight:700;
        font-size:clamp(19px,3vw,30px);line-height:1.8;letter-spacing:.05em;
        margin:clamp(34px,5.4vw,62px) 0;padding:6px 0 6px 22px;max-width:24em;
        border-left:3px solid var(--acc);position:relative}
  .stop::before{content:"";position:absolute;left:-3px;top:0;bottom:0;width:3px;background:var(--b50);
                transform:scaleY(1);transform-origin:top;transition:transform 1.1s cubic-bezier(.2,.75,.25,1) .15s}
  section.in .stop::before{transform:scaleY(0)}
  .band-deep .stop{color:#fff}
  .band-deep .stop::before{background:var(--b800)}
  .stop .em{color:var(--b600)}
  .band-deep .stop .em{color:var(--acc)}

  /* ---------- ③ 追従する目次 ---------- */
  .toc{position:sticky;top:56px;z-index:40;background:rgba(255,255,255,.94);
       backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--n300)}
  .toc ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;overflow-x:auto;
          scrollbar-width:none;-ms-overflow-style:none}
  .toc ul::-webkit-scrollbar{display:none}
  .toc a{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;text-decoration:none;
         font-size:12px;font-weight:700;color:var(--n500);padding:12px 13px;position:relative;
         transition:color .25s}
  .toc a .n{font-family:var(--mono);font-size:10px;color:var(--n300);transition:color .25s}
  .toc a::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;background:var(--b600);
                transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.75,.25,1)}
  .toc a:hover{color:var(--b600)}
  .toc a.on{color:var(--b700)}
  .toc a.on .n{color:var(--b500)}
  .toc a.on::after{transform:scaleX(1)}
  @media (max-width:760px){.toc{top:52px}.toc a{padding:11px 11px;font-size:11.5px}}

  /* ---------- ④ 図のアニメーション ---------- */
  .fig .draw{stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900)}
  section.in .fig .draw{animation:figDraw 1.5s cubic-bezier(.3,.7,.3,1) .15s forwards}
  section.in .fig .draw.d2{animation-delay:.5s}
  section.in .fig .draw.d3{animation-delay:.9s}
  @keyframes figDraw{to{stroke-dashoffset:0}}

  .fig .pop{opacity:0}
  section.in .fig .pop{animation:figPop .5s ease forwards}
  section.in .fig .pop.p1{animation-delay:.75s}
  section.in .fig .pop.p2{animation-delay:1.0s}
  section.in .fig .pop.p3{animation-delay:1.25s}
  @keyframes figPop{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

  .fig .rise{opacity:0}
  section.in .fig .rise{animation:figRise .7s cubic-bezier(.2,.75,.25,1) forwards}
  section.in .fig .rise.r1{animation-delay:.05s}
  section.in .fig .rise.r2{animation-delay:.28s}
  section.in .fig .rise.r3{animation-delay:.51s}
  @keyframes figRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .fig .pop,.fig .rise{transform-box:fill-box;transform-origin:center}
  .fig .lead1{opacity:0}
  section.in .fig .lead1{animation:figPop .6s ease 1.5s forwards}

  @media (prefers-reduced-motion:reduce){
    .fig .draw,.fig .pop,.fig .rise{stroke-dashoffset:0 !important;opacity:1 !important;animation:none !important}
    .stop::before{display:none}
    section.in .chap .n{animation:none}
  }

  /* ---------- ⑤ 6マスを選ばせる ---------- */
  .matrix td[data-cell]{cursor:pointer;transition:background .25s,box-shadow .25s}
  .matrix td[data-cell]:hover{background:var(--b50)}
  .matrix td[data-cell]:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
  .matrix td.sel{background:#FDF4E2;box-shadow:inset 0 0 0 2px var(--acc)}
  .matrix td.sel::after{content:"空いている";position:absolute;right:10px;top:10px;
                        font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;
                        background:var(--acc);color:#1A1405;padding:2px 7px}
  .matrix td{position:relative}
  .mxhint{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:12.5px;
          font-weight:700;color:var(--b600)}
  .mxhint .ic{width:14px;height:14px}
  .mxout{margin-top:16px;padding:18px 20px;background:var(--b50);border-left:3px solid var(--b600);
         font-size:14px;line-height:1.95;transition:background .3s,border-color .3s}
  .mxout.on{background:#FDF4E2;border-left-color:var(--acc)}
  .mxout p{margin:0}
  .mxout b{color:var(--b700)}
  .mxout.on b{color:var(--acc-ink)}
  .mxout .go{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;font-weight:700;
             color:var(--b600);text-decoration:none;border-bottom:1px solid var(--b300);padding-bottom:2px}
  .mxout .go:hover{color:var(--b500);border-color:var(--b500)}
  .mxout .go .ic{width:14px;height:14px}
  .mxreset{background:none;border:none;cursor:pointer;font-family:var(--sans);font-size:12px;
           font-weight:700;color:var(--n500);padding:6px 0;margin-top:8px}
  .mxreset:hover{color:var(--b600)}

  /* ---------- ⑥ 注記の格下げ ---------- */
  .note{display:flex;align-items:flex-start;gap:8px;margin:20px 0 0;padding-top:13px;
        border-top:1px solid var(--n300);font-size:12px;font-weight:500;color:var(--n500);line-height:1.85}
  .note .ic{width:13px;height:13px;color:var(--n300);margin-top:4px;flex:none}
  .note b{color:var(--n700)}
  .band-deep .note{border-top-color:rgba(234,241,248,.2);color:#A8C0D6}
  .band-deep .note .ic{color:#54728E}
  .band-deep .note b{color:#DCE8F4}

  /* ---------- ⑦ 密度の調整 ---------- */
  .face ul li.more{border-style:dashed;color:var(--n500)}

  /* セクション間の切れ目を、章の頭で少し広く取る */
  section[id^="s-"]{padding-top:clamp(52px,7.4vw,96px)}

  /* ── 永野版の図をそのまま持ち込むためのクラス定義 ──
        図の座標・パス・文字位置は元データのまま。色だけこちらのトークンに寄せる */
  .fig .s-m{font-family:var(--mono)}
  .fig .s-t{fill:var(--n900)}
  .fig .s-ts{fill:var(--n700)}
  .fig .s-tf{fill:var(--n700)}
  .fig .s-tb{fill:var(--b600)}
  .fig .s-tg{fill:var(--acc-ink)}
  .fig .s-mute{fill:#C9D2DA}
  .fig .s-brand{fill:var(--b600)}
  .fig .s-box{fill:var(--white);stroke:var(--n300);stroke-width:1.4}
  .fig .s-boxb{fill:var(--b50);stroke:var(--b600);stroke-width:1.8}
  .fig .s-line{stroke:var(--n500);stroke-width:1.5;fill:none}
  /* 比較対象の線。青より弱く、でも「線がある」と分かる濃さに */
  .fig .s-lined{stroke:#9FAEBB;stroke-width:1.8;fill:none;stroke-dasharray:6 5}
  .fig .s-lineb{stroke:var(--b600);stroke-width:2.2;fill:none}
  /* 図全体をふわっと出す（線の描画を使わない図はこちら） */
  .fig.reveal{opacity:0;transform:translateY(14px);
              transition:opacity 1s ease,transform 1s cubic-bezier(.2,.75,.25,1)}
  section.in .fig.reveal{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.fig.reveal{opacity:1;transform:none;transition:none}}

  /* ── 参考図のカルーセル ──
        縦に積むとページが伸びるので、参考図だけ横に並べる。
        タブ・矢印・スワイプのどれでも動く。中身はDOMに残すのでSEO/AIOに影響しない */
  .carou{margin:30px 0 0;background:var(--white);border:1px solid var(--n300)}
  .carou-head{display:flex;align-items:center;gap:10px 14px;padding:11px 14px;
              border-bottom:1px solid var(--n300);flex-wrap:wrap}
  .carou-lbl{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;
             font-weight:700;letter-spacing:.16em;color:var(--n500);margin:0;flex:none}
  .carou-lbl::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--n300)}
  .carou.auto .carou-lbl::before{background:var(--b500);animation:carouPulse 1.6s ease-in-out infinite}
  @keyframes carouPulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}
  @media (prefers-reduced-motion:reduce){.carou.auto .carou-lbl::before{animation:none}}
  .carou-tabs{display:flex;gap:4px;flex:1;flex-wrap:wrap;min-width:0}
  .carou-tabs button{font-family:var(--sans);font-size:12px;font-weight:700;cursor:pointer;
                     background:none;border:1px solid transparent;color:var(--n500);padding:6px 11px;
                     transition:background .2s,border-color .2s,color .2s;white-space:nowrap}
  .carou-tabs button:hover{color:var(--b600)}
  .carou-tabs button.on{background:var(--b50);border-color:var(--b300);color:var(--b700)}
  .carou-nav{display:flex;gap:6px;flex:none}
  .carou-nav button{width:30px;height:30px;border:1px solid var(--n300);background:var(--white);
                    cursor:pointer;color:var(--n700);font-size:16px;line-height:1;
                    display:flex;align-items:center;justify-content:center}
  .carou-nav button:hover{border-color:var(--b400);color:var(--b600)}
  .carou-nav button[disabled]{opacity:.3;cursor:default}
  .carou-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
               scrollbar-width:none;-ms-overflow-style:none}
  .carou-track::-webkit-scrollbar{display:none}
  .carou-item{flex:0 0 100%;scroll-snap-align:start;padding:20px 22px 6px;min-width:0}
  .carou-item h4{font-family:var(--serif);font-size:15.5px;font-weight:700;letter-spacing:.03em;
                 margin:0 0 14px;line-height:1.6}
  .carou-dots{display:flex;gap:6px;justify-content:center;padding:12px 0 16px}
  .carou-dots i{width:26px;height:3px;background:var(--n300);display:block;transition:background .3s}
  .carou-dots i.on{background:var(--b600)}
  /* 自動再生中は、現在のドットが少しずつ満ちて残り時間を示す */
  .carou.auto .carou-dots i.on{
    background-image:linear-gradient(var(--b600),var(--b600));
    background-repeat:no-repeat;background-size:0 100%;background-color:var(--b200);
    animation:dotFill var(--dur,5200ms) linear forwards}
  @keyframes dotFill{to{background-size:100% 100%}}
  @media (prefers-reduced-motion:reduce){
    .carou.auto .carou-dots i.on{animation:none;background-color:var(--b600)}
  }
  @media (max-width:640px){.carou-item{padding:16px 14px 4px}.carou-tabs button{font-size:11.5px;padding:5px 9px}}
  @media (prefers-reduced-motion:reduce){.carou-track{scroll-behavior:auto}}

  /* チャネル比較：ここは横に並べて見比べるほうが速いので、表のまま */
  .cmp{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
  .cmp th,.cmp td{border:1px solid var(--n300);padding:11px 12px;text-align:left;vertical-align:top}
  .cmp thead th{background:var(--b800);color:#fff;font-family:var(--mono);font-size:10px;
                font-weight:700;letter-spacing:.1em;white-space:nowrap}
  .cmp thead th.col-mail{background:var(--acc);color:#1A1405}
  .cmp tbody th{background:var(--n100);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
                color:var(--n700);font-weight:700;white-space:nowrap;width:96px}
  .cmp .m{font-weight:700;margin-right:6px;font-size:14px}
  .cmp .m.o{color:var(--b600)}
  .cmp .m.x{color:#B3453F}
  .cmp .m.t{color:var(--n500)}
  .cmp td span{font-weight:500;color:var(--n700)}
  .cmp td.col-mail{background:#FDF9EF}
  .cmp .role td{background:var(--b50)}
  .cmp .role b{color:var(--b700)}
  .cmp .role td.col-mail{background:#FDF4E2}
  .cmp .role td.col-mail b{color:var(--acc-ink)}
  .cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cmp .swipe{display:none}
  @media (max-width:900px){
    .cmp{min-width:680px}
    .cmp-wrap .swipe{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
                     color:var(--n500);margin:0 0 8px}
  }

  .carou.pair .abtxt{margin:0;font-size:13.5px;font-weight:500;color:var(--n700);line-height:1.95}
  .carou.pair .carou-item{min-height:118px}

  /* データの現状を3枚で立てる */
  .gap3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 24px}
  .g3{background:var(--white);border:1px solid var(--n300);border-top:2px solid var(--b400);
      padding:18px 18px 19px}
  .g3.hi{border-top-color:var(--acc);background:#FDF9EF}
  .g3 .ic{width:22px;height:22px;color:var(--b500);display:block;margin-bottom:11px}
  .g3.hi .ic{color:var(--acc-ink)}
  .g3 .k{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.16em;
         color:var(--n500);margin:0 0 6px}
  .g3.hi .k{color:var(--acc-ink)}
  .g3 p{margin:0;font-size:13.5px;font-weight:500;color:var(--n700);line-height:1.85}
  .g3 b{color:var(--n900);font-weight:700}
  @media (max-width:760px){.gap3{grid-template-columns:1fr}}

  /* 図を板に載せて、周りの本文と分ける */
  .figboard{background:var(--n100);border:1px solid var(--n300);
            padding:clamp(16px,2.6vw,28px) clamp(14px,2.4vw,26px);margin-top:6px}
  .figboard .fig{margin:0}

  /* 中間の矢印は、止めずに流し続ける（データが行き来していることを示す） */
  .fig .flow{stroke-dasharray:10 8;animation:flowGo 1.15s linear infinite}
  .fig .flowr{stroke-dasharray:5 7;animation:flowGo 1.6s linear infinite;opacity:.85}
  @keyframes flowGo{from{stroke-dashoffset:0}to{stroke-dashoffset:-18}}
  @media (prefers-reduced-motion:reduce){
    .fig .flow,.fig .flowr{animation:none;stroke-dasharray:none}
  }

  /* ── 図の追加クラス ── */
  .fig .bxg{fill:var(--n100);stroke:var(--n300);stroke-width:1.4}
  .fig .bxw{fill:var(--white);stroke:var(--n300);stroke-width:1.4}
  .fig .lna{stroke:var(--acc);stroke-width:2.2;fill:none}
  .fig .lnd{stroke:var(--n500);stroke-width:1.5;fill:none;stroke-dasharray:4 4}
  .fig .fillb{fill:var(--b50)}
  .fig .filla{fill:#FDF4E2}
  .fig .warn{fill:var(--acc-ink);font-size:11.5px;font-weight:700}
  .fig .good{fill:var(--b700);font-size:11.5px;font-weight:700}
  .fig .ttl{font-size:13px;font-weight:700;fill:var(--n900)}
  .fig .xs{font-size:11px;font-weight:500;fill:var(--n700)}
  .fig .wh{fill:#fff}
  .fig .star{fill:var(--acc)}
  .fig .thin{stroke:var(--n300);stroke-width:1;fill:none}
  .fig .decay{stroke:var(--n500);stroke-width:1.8;fill:none;stroke-dasharray:5 4}
  .fig .keep{stroke:var(--b600);stroke-width:2.4;fill:none;stroke-linecap:round}
  .figcap.strong{font-size:13px;color:var(--n700);font-weight:500;line-height:1.9;margin-top:10px}

  /* 6マスの中身を3行構成にする */
  .matrix td .lead2{display:block;font-size:12px;font-weight:500;color:var(--n700);
                    margin-top:5px;padding-top:5px;border-top:1px solid var(--n300);line-height:1.7}
  .matrix td .star{color:var(--acc);font-weight:700}

  .h3l{font-family:var(--serif);font-size:clamp(16px,2vw,19px);font-weight:700;letter-spacing:.04em;margin:34px 0 14px;line-height:1.6}