.progress{ position:fixed; top:0; left:0; height:3px; background:var(--gold); width:0; z-index:60; transition:width .1s linear; }

  /* HERO (OGP-friendly) */
  .a-hero .frame{ max-width:var(--maxw); margin:0 auto; padding:28px 40px 0; }
  .a-hero .crumb{ margin-bottom:28px; }
  .a-hero .meta-top{ display:flex; gap:12px; align-items:center; margin-bottom:20px; flex-wrap:wrap; }
  .a-hero .cat{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#fff; background:var(--gold); padding:7px 14px; border-radius:100px; }
  .a-hero .ty{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:var(--ink); padding:7px 13px; border-radius:100px; }
  .a-hero .tags{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--ink-3); }
  .a-hero h1{ font-family:var(--disp); font-weight:700; font-size:clamp(28px,6.2vw,94px); line-height:1.14; letter-spacing:-.02em; margin:0 0 28px; max-width:none; }
  .a-hero .deck{ font-size:17px; line-height:2; color:var(--ink-2); max-width:min(100%,780px); margin:0 0 30px; }
  .a-hero .byline{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .a-hero .who{ display:flex; align-items:center; gap:13px; }
  .a-hero .who .av{ width:42px; height:42px; border-radius:50%; overflow:hidden; border:1px solid var(--line); }
  .a-hero .who .av .ph{ aspect-ratio:1; border:0; border-radius:0; }
  .a-hero .who .nm{ font-weight:700; font-size:13.5px; }
  .a-hero .who .rl{ font-family:var(--mono); font-size:11px; color:var(--ink-3); }
  .a-hero .info{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-3); display:flex; gap:20px; }
  .a-hero .actions{ display:flex; gap:9px; }
  .a-hero .actions button{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; padding:9px 15px; border:1px solid var(--line); background:var(--paper-3); border-radius:100px; cursor:pointer; color:var(--ink-2); display:flex; gap:7px; align-items:center; transition:.2s; }
  .a-hero .actions button:hover{ border-color:var(--ink); color:var(--ink); }
  .a-hero .keyvis{ max-width:var(--maxw); margin:36px auto 0; padding:0 40px; }
  .a-hero .keyvis .ph{ aspect-ratio:16/9; }
  .a-hero .keyvis figcaption{ font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:12px; }

  .body-wrap{ padding-top:58px; }
  .label-mod{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:14px; }

  /* ===== Sound Ethics blue hero block ===== */
  .a-hero{ background:radial-gradient(120% 90% at 82% -10%, rgba(194,255,61,.12), transparent 55%), var(--blue); color:#fff; padding-bottom:48px; }
  .a-hero .frame{ padding-top:36px; }
  .a-hero .crumb, .a-hero .crumb a{ color:rgba(255,255,255,.6); }
  .a-hero .crumb .cur{ color:#fff; }
  .a-hero .crumb .sep{ color:rgba(255,255,255,.32); }
  .a-hero .cat{ background:var(--acid); color:#0b0b0d; }
  .a-hero .ty{ background:rgba(255,255,255,.16); color:#fff; }
  .a-hero .tags{ color:rgba(255,255,255,.66); }
  .a-hero .tags a{ color:inherit; text-decoration:none; transition:.2s; }
  .a-hero .tags a:hover{ color:var(--acid); }
  .a-hero h1{ color:#fff; }
  .a-hero .deck{ color:rgba(255,255,255,.82); }
  .a-hero .byline{ border-color:rgba(255,255,255,.22); }
  .a-hero .who .nm{ color:#fff; }
  .a-hero .who .rl{ color:rgba(255,255,255,.6); }
  .a-hero .who .av{ border-color:rgba(255,255,255,.3); }
  .a-hero .info{ color:rgba(255,255,255,.6); }
  .a-hero .actions button{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.26); color:#fff; }
  .a-hero .actions button:hover{ background:#fff; color:var(--ink); border-color:#fff; }
  .a-hero .keyvis .ph{ border-color:rgba(255,255,255,.22); }
  .a-hero .keyvis figcaption{ color:rgba(255,255,255,.55); }
  /* 目次からのページ内ジャンプで、見出しが固定要素の裏に隠れないための逃げ幅。
     内訳(PC): ヘッダー121 + タイトルバー48 = 169 が塞ぐ高さ。
     ただしジャンプ後にタイトルバーが現れて本文が約48px下へずれるぶんを差し引き、
     見出し上端がバー下端の約24px下に来る 146px とする（SPは 97+46 で 118px）。
     ※実測で決めた値。バーの高さを変えたらここも合わせること。 */
  .sec-anchor{ scroll-margin-top:146px; }
  @media (max-width:860px){
    .sec-anchor{ scroll-margin-top:118px; }
  }

  /* inline TOC module */
  .m-toc{ max-width:var(--measure); background:var(--paper-3); border:1px solid var(--line); border-radius:8px; padding:28px 32px; }
  .m-toc .tt{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:10px; margin-bottom:18px; }
  .m-toc .tt::before{ content:""; width:22px; height:1px; background:var(--gold); }
  /* 目次は PC/SP とも1カラム（番号が上から順に読める・lv3のインデントが効く） */
  .m-toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; columns:1; }
  .m-toc li{ counter-increment:toc; break-inside:avoid; }
  .m-toc a{ display:flex; gap:11px; padding:7px 0; text-decoration:none; color:var(--ink-2); font-size:14px; line-height:1.5; border-bottom:1px solid var(--line-2); transition:.2s; }
  .m-toc a::before{ content:counter(toc,decimal-leading-zero); font-family:var(--mono); font-size:11px; color:var(--gold); }
  .m-toc a:hover{ color:var(--ink); padding-left:4px; }

  .endline{ max-width:var(--measure); margin:50px auto 0; text-align:center; font-family:var(--head); font-weight:900; color:var(--gold); font-size:20px; letter-spacing:.3em; }

  @media (max-width:860px){
    .a-hero .frame,.a-hero .keyvis{ padding-left:22px; padding-right:22px; }
    .a-hero .byline{ flex-direction:column; align-items:flex-start; }
    .m-toc ol{ columns:1; }
  }

  /* ===== 2-COLUMN LAYOUT + STICKY SIDEBAR ===== */
  /* 幅はヘッダー(.bar)と同一: max-width 1280 + padding 40 → ロゴ左端120px〜SAC右端1320px に一致 */
  .layout{ max-width:1280px; margin:0 auto; padding:0 40px; display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:48px; align-items:start; }
  .layout .article{ max-width:100%; margin:0; padding:0; }
  .layout .body-wrap{ padding-top:50px; }
  .layout .main-col .module{ margin-left:0; margin-right:0; max-width:100%; }
  .layout .main-col .module[style*="max-width"]{ max-width:100% !important; }
  /* white reading sheet floating on the dark page */
  .main-col.sheet{ background:#fff; border-radius:16px; padding:6px 36px 48px; box-shadow:0 40px 80px -50px rgba(0,0,0,.7); }
  @media (max-width:600px){ .main-col.sheet{ padding:6px 22px 32px; border-radius:12px; } }
  .layout .m-related{ max-width:100%; margin-top:64px; }
  .layout .m-related .grid{ grid-template-columns:1fr 1fr; gap:22px; }
  .related-foot{ margin-top:110px; margin-bottom:104px; }
  .related-foot .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
  @media (max-width:860px){ .related-foot .grid{ grid-template-columns:1fr; } }

  /* sidebar */
  .side-col{ position:sticky; top:var(--sticky-top, 140px); max-height:calc(100vh - var(--sticky-top, 140px) - 28px); overflow-y:auto; overflow-x:hidden; background:#fff; border-radius:16px; padding:30px 24px; box-shadow:0 40px 80px -50px rgba(0,0,0,.7); }
  .side-col .wgt-head::before{ background:#54c40a; }
  .side-col .s-item.top .rk{ background:#54c40a; color:#0b0b0d; }
  .side-col .sw-search button:hover{ background:#54c40a; color:#0b0b0d; }
  .side-col::-webkit-scrollbar{ width:6px; }
  .side-col::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; }
  .side-col::-webkit-scrollbar-track{ background:transparent; }
  .wgt{ margin-bottom:32px; }
  .wgt:last-child{ margin-bottom:0; }
  .wgt-head{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); display:flex; align-items:center; gap:10px; margin-bottom:16px; padding-bottom:11px; border-bottom:1px solid var(--ink); }
  .wgt-head::before{ content:""; width:13px; height:13px; background:var(--gold); border-radius:2px; flex:none; }
  .wgt-head .jp{ color:var(--ink-3); font-size:10px; letter-spacing:.04em; margin-left:auto; }

  /* search widget */
  .sw-search{ display:flex; gap:8px; }
  .sw-search input{ flex:1; min-width:0; border:1px solid var(--line); background:var(--paper-3); border-radius:100px; padding:12px 18px; font-family:var(--sans); font-size:13px; color:var(--ink); outline:none; transition:border-color .2s; }
  .sw-search input:focus{ border-color:var(--ink); }
  .sw-search button{ background:var(--ink); color:var(--paper); border:0; border-radius:100px; padding:0 18px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; cursor:pointer; transition:.2s; flex:none; }
  .sw-search button:hover{ background:var(--gold); }
  .sw-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
  .sw-tags a{ font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--ink-2); text-decoration:none; border:1px solid var(--line); border-radius:100px; padding:5px 11px; transition:.2s; }
  .sw-tags a:hover{ border-color:var(--ink); color:var(--ink); }

  /* article items (popular / related) */
  .s-item{ display:grid; grid-template-columns:88px 1fr; gap:13px; padding:12px 0; border-bottom:1px solid var(--line-2); text-decoration:none; color:inherit; align-items:start; }
  .s-item:last-child{ border-bottom:0; }
  .s-item .ban{ position:relative; aspect-ratio:4/3; border-radius:5px; overflow:hidden; border:1px solid var(--line); background:var(--paper-3); }
  .s-item .ban img{ width:100%; height:100%; object-fit:cover; display:block; }
  .s-item .rk{ position:absolute; left:0; top:0; width:24px; height:24px; background:var(--ink); color:var(--paper); font-family:var(--head); font-weight:900; font-size:12px; display:flex; align-items:center; justify-content:center; }
  .s-item.top .rk{ background:var(--gold); }
  .s-item .t{ font-size:12.5px; line-height:1.55; font-weight:700; letter-spacing:.01em; }
  .s-item:hover .t{ color:var(--gold); }
  .s-item .mt{ font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--ink-3); margin-top:6px; }

  @media (max-width:980px){
    .layout{ grid-template-columns:minmax(0,1fr); gap:0; padding-left:22px; padding-right:22px; }
    .side-col{ position:static; max-height:none; overflow:visible; margin-top:40px; padding:26px 22px; }
    .layout .m-related .grid{ grid-template-columns:1fr; }
  }

  /* テンプレの body.has-cta-band 相当（CTAバンド直後のフッター余白を詰める）。
     CMS は body ではなく .mag ラッパ構成のため、記事ページ専用CSSで上書きする。 */
  .mag-footer{ margin-top:0; }

  /* Tailwind preflight が figure 等の既定マージンをリセットするため、
     テンプレ（ブラウザ既定 1em 40px）に依存しているモジュールだけ元に戻す */
  .article .m-gallery figure,
  .article .m-video figure,
  .article .m-split .vis{ margin:16px 40px; }
  .article figure.m-image{ margin-bottom:16px; }

  /* WIDGET: Banner（CMS登録の横長バナー・縦積み最大5件） */
  .side-col .wgt-banners{ display:flex; flex-direction:column; gap:14px; }
  .side-col .wgt-banners a{ display:block; border-radius:10px; overflow:hidden; border:1px solid var(--line); transition:opacity .18s ease, transform .18s ease; }
  .side-col .wgt-banners a:hover{ opacity:.88; transform:translateY(-2px); }
  .side-col .wgt-banners img{ display:block; width:100%; height:auto; }

/* ============================================================
   記事詳細 再設計（2026-08）
   - HERO: 背景ビジュアル + 固定高さ（PC 260px / SP 280px）+ Noto Sans JP 32/22px
   - 左カラム: 最上部にサブコピー、末尾に編集者情報
   - スティッキーのタイトルバー（HERO通過後に表示）
   - 本文フォント: 18px/1.9（SP 16px/2.0）、最小 12px
   ============================================================ */
  .a-hero{
    position:relative; overflow:hidden; padding-bottom:0;
    min-height:260px; display:flex; align-items:center;
    background:var(--blue);
  }
  .a-hero .hero-bg{ position:absolute; inset:0; z-index:0; }
  .a-hero .hero-bg img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.9); }
  /* 背景ビジュアル上でもタイトルが読めるよう暗幕（左側を濃く） */
  .a-hero.has-visual::after{
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(90deg, rgba(8,8,10,.82) 0%, rgba(8,8,10,.62) 55%, rgba(8,8,10,.40) 100%);
  }
  .a-hero .frame{ position:relative; z-index:2; width:100%; padding:28px 40px 28px; }
  .a-hero .crumb{ margin-bottom:14px; font-size:12px; }
  .a-hero .meta-top{ margin-bottom:12px; }
  .a-hero h1{
    font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Helvetica Neue",Arial,sans-serif;
    font-weight:700; font-size:32px; line-height:1.55; letter-spacing:.01em;
    margin:0; max-width:820px; color:#fff;
  }
  .a-hero .hero-date{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:rgba(255,255,255,.7); margin-top:14px; }

  /* スティッキーのタイトルバー */
  .title-bar{
    /* 共通ヘッダー（sticky・PC 120px）の直下に吸着 */
    position:sticky; top:120px; z-index:45;
    /* ヘッダーと同じ理由で不透明にする（半透明+blur は白いシートの上で明滅する） */
    background:#0b0b0d;
    border-bottom:1px solid rgba(255,255,255,.08);
    opacity:0; max-height:0; overflow:hidden; transition:opacity .25s ease, max-height .25s ease;
    pointer-events:none;
  }
  .title-bar.show{ opacity:1; max-height:60px; pointer-events:auto; }
  .title-bar .inner{
    max-width:var(--maxw); margin:0 auto; padding:10px 40px;
    display:flex; align-items:center; gap:12px; min-width:0;
  }
  .title-bar .tb-cat{ flex:none; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#0b0b0d; background:var(--acid); padding:4px 10px; border-radius:100px; }
  .title-bar .tb-title{ font-family:"Noto Sans JP",sans-serif; font-weight:700; font-size:14px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }

  /* 左カラム: サブコピー（最上部）と編集者情報（末尾） */
  .main-col .deck{ font-size:18px; line-height:1.9; color:var(--ink-2); margin:0 0 28px; padding-bottom:24px; border-bottom:1px solid var(--line); }
  .main-col .byline{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; margin-top:48px; padding:20px 0 0; border-top:1px solid var(--line); }
  .main-col .who{ display:flex; align-items:center; gap:13px; }
  .main-col .who .av{ width:42px; height:42px; border-radius:50%; overflow:hidden; border:1px solid var(--line); flex:none; }
  .main-col .who .av .ph{ aspect-ratio:1; border:0; border-radius:0; }
  .main-col .who .nm{ font-weight:700; font-size:14px; }
  .main-col .who .rl{ font-family:var(--mono); font-size:12px; color:var(--ink-3); }
  .main-col .info{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--ink-3); }

  /* 見出しの先頭「｜」 */
  .m-heading h2 .h-bar{ color:var(--acid); margin-right:.15em; font-weight:400; }

  /* 本文フォント（note.com 参照: 18px/36px, SP 16px/32px, 最小 12px） */
  .main-col .m-rich{ font-size:18px; line-height:2; }
  .main-col .m-lead{ font-size:19px; line-height:1.95; }
  .main-col .m-rich h2{ font-size:26px; }
  .main-col .m-rich h3{ font-size:20px; }
  .side-col .wgt-head, .side-col .s-item .mt, .side-col .sw-tags a{ font-size:12px; }
  .side-col .s-item .t{ font-size:13px; }

  @media (max-width:980px){
    .a-hero{ min-height:280px; }
    .a-hero .frame{ padding:24px 22px; }
    .a-hero h1{ font-size:22px; line-height:1.5; }
    .title-bar{ top:96px; } /* SP ヘッダー高さ */
    .title-bar .inner{ padding:9px 16px; }
    .title-bar .tb-title{ font-size:13px; }
    .main-col .deck{ font-size:16px; line-height:1.9; }
    .main-col .m-rich{ font-size:16px; line-height:2; }
    .main-col .m-lead{ font-size:17px; }
    .main-col .m-rich h2{ font-size:22px; }
    .main-col .m-rich h3{ font-size:18px; }
  }

  /* HEROプリセット（モノトーン）使用時は、画像側に既に左シェードがあるため暗幕を弱める */
  .a-hero.is-preset::after{
    background:linear-gradient(90deg, rgba(8,8,10,.62) 0%, rgba(8,8,10,.34) 55%, rgba(8,8,10,.18) 100%);
  }

  /* ============================================================
     追加調整（2026-08-19 第2弾）
     ============================================================ */
  /* 右カラム: 共通ヘッダー(120px) + タイトルバー表示時(45px) を避けて吸着 */
  :root{ --sticky-top:140px; }
  body.tb-on{ --sticky-top:184px; }

  /* 左カラム: サブコピー（見切れさせず全文表示） */
  .main-col .deck{
    display:block; overflow:visible; text-overflow:clip; white-space:normal;
  }

  /* 左カラム最下部: Supervised by（author ブロック） */
  .main-col .author-foot{ margin-top:52px; padding-top:8px; border-top:1px solid var(--line); }
  .main-col .author-foot .module{ margin-top:24px; }

  /* 記事一覧ページへの導線（Related の下） */
  .list-cta{ padding-top:8px; padding-bottom:8px; display:flex; justify-content:center; }
  .list-cta-btn{
    display:inline-flex; align-items:center; gap:18px;
    padding:20px 40px; border:1px solid rgba(255,255,255,.22); border-radius:100px;
    text-decoration:none; color:#fff; transition:.25s; background:rgba(255,255,255,.02);
  }
  .list-cta-btn:hover{ border-color:var(--acid); background:rgba(194,255,61,.08); }
  .list-cta-btn .lc-eye{ font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--acid); }
  .list-cta-btn .lc-main{ font-weight:700; font-size:16px; letter-spacing:.02em; }
  .list-cta-btn .lc-arr{ color:var(--acid); font-size:18px; transition:transform .25s ease; }
  .list-cta-btn:hover .lc-arr{ transform:translateX(4px); }

  @media (max-width:980px){
    .list-cta-btn{ padding:16px 26px; gap:12px; }
    .list-cta-btn .lc-main{ font-size:14px; }
  }

  /* ============================================================
     追加調整（2026-08-19 第3弾）
     ============================================================ */
  /* 大見出しの「|」: 半角・太字・濃色（白背景でも視認できるように） */
  .main-col .m-heading h2 .h-bar{
    display:inline-block; margin-right:.34em;
    color:#2f6e12; font-weight:900;
    transform:scaleX(1.9); transform-origin:left center;
  }

  /* サブコピー（リード文）: 左のアクセントバー + 大きめ・読みやすい行間 */
  .main-col .deck{
    position:relative; margin:0 0 34px; padding:4px 0 24px 22px;
    font-size:19px; line-height:1.95; color:var(--ink-2);
    border-bottom:1px solid var(--line);
  }
  .main-col .deck::before{
    content:""; position:absolute; left:0; top:8px; bottom:32px; width:4px;
    border-radius:2px; background:linear-gradient(180deg,#c2ff3d,#2fe6ff);
  }

  /* 目次・結論の文字サイズを「この記事でわかること」(16px) に統一 */
  .main-col .m-toc a{ font-size:16px; line-height:1.7; }
  .main-col .m-toc a::before{ font-size:12px; }
  .main-col .m-supplement .lbl{ font-size:16px; font-weight:700; letter-spacing:.02em; color:var(--ink); text-transform:none; font-family:inherit; margin-bottom:10px; }
  .main-col .m-note .lbl{ font-size:16px; font-weight:700; letter-spacing:.02em; color:var(--ink); text-transform:none; font-family:inherit; }

  /* ポイント（この記事でわかること）のアイコン: 白背景で埋もれないよう反転 */
  .main-col .m-point .pt-head .ic{
    background:#101013; color:var(--acid); border:0;
    font-weight:900; font-size:15px;
  }
  .main-col .m-point .pt-head .lbl{ color:#2f6e12; font-size:11px; }
  .main-col .m-point{ border-top-color:#2f6e12; }
  .main-col .m-point li::before{ background:#2f6e12; }

  @media (max-width:980px){
    .main-col .deck{ font-size:17px; padding-left:16px; }
    .main-col .m-toc a{ font-size:15px; }
  }

  /* ============================================================
     追加調整（2026-08-19 第4弾）: SP最適化 / 見出しレベル / 装飾ボックス
     ============================================================ */
  /* HERO 下に余白（PC/SP共通） */
  .a-hero{ margin-bottom:10px; }

  /* 見出しブロックのレベル別スタイル（H2=章 / H3=章の中の小項目） */
  .main-col .m-heading.lv3{ margin-top:44px; }
  .main-col .m-heading.lv3 h3{
    font-size:21px; font-weight:700; line-height:1.6; letter-spacing:.01em; margin:0;
  }
  .main-col .m-heading.lv3 h3 .h-bar{
    display:inline-block; margin-right:.34em; color:#2f6e12; font-weight:900;
    transform:scaleX(1.5); transform-origin:left center;
  }
  .main-col .m-heading.lv3.line{ border-bottom:0; padding-bottom:0; }

  /* 目次の2階層表示 */
  .main-col .m-toc li.lv3{ padding-left:20px; }
  .main-col .m-toc li.lv3 a{ font-size:14.5px; color:var(--ink-3); }
  .main-col .m-toc li.lv3 a::before{ content:"—"; font-size:11px; }

  /* 装飾ボックスの見出し（h2/h3 から p へ変更したぶんの見た目を維持） */
  .main-col .bx-title{ margin:0; font-weight:700; font-size:16px; line-height:1.6; color:var(--ink); }
  .main-col .m-cta .bx-title.cta-title{ font-size:27px; line-height:1.45; letter-spacing:-.01em; }
  .main-col .m-author .bx-title.au-name{ font-size:17px; }

  /* 記事一覧ページへの導線: 上下マージンのバランスを整える */
  .related-foot{ margin-top:96px; margin-bottom:48px; }
  .list-cta{ padding-top:0; padding-bottom:0; margin:0 auto 96px; }

  /* SP画像タップ拡大（ライトボックス） */
  .body-wrap img.zoomable{ cursor:zoom-in; }
  .img-zoom{
    position:fixed; inset:0; z-index:200; display:none;
    align-items:center; justify-content:center; padding:16px;
    background:rgba(6,6,8,.94); backdrop-filter:blur(2px);
  }
  .img-zoom.on{ display:flex; }
  .img-zoom img{ max-width:100%; max-height:88vh; object-fit:contain; border-radius:6px; }
  .img-zoom .iz-close{
    position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:50%;
    border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.4); color:#fff;
    font-size:22px; line-height:1; cursor:pointer;
  }

  @media (max-width:980px){
    /* 大見出し/小見出しのサイズ（参考サイト準拠: H2 20px / H3 17px） */

    .main-col .m-heading h2{ font-size:20px; line-height:1.5; margin-bottom:0; }
    .main-col .m-heading.lv3{ margin-top:34px; }
    .main-col .m-heading.lv3 h3{ font-size:17px; line-height:1.55; }
    .main-col .m-rich h2{ font-size:20px; line-height:1.5; margin:2em 0 .8em; }
    .main-col .m-rich h3{ font-size:17px; line-height:1.55; margin:1.7em 0 .6em; }
    .main-col .m-split h3{ font-size:19px; line-height:1.55; }
    /* 本文テキストのマージン（見出し直後は詰める） */
    .main-col .m-rich p{ margin-bottom:1.5em; }


    /* 編集者アイコンを小さく + レイアウト調整 */
    .main-col .m-author .box{ grid-template-columns:52px 1fr !important; gap:14px !important; align-items:start; }
    .main-col .m-author .ava{ width:52px; height:52px; flex:none; }
    .main-col .m-author .bx-title.au-name{ font-size:15px; }
    .main-col .m-author .role, .main-col .m-author p{ font-size:13.5px; line-height:1.8; }

    /* 記事一覧ページへの導線: 上下バランス */
    .related-foot{ margin-top:56px; margin-bottom:32px; }
    .list-cta{ margin-bottom:56px; }
  }

  /* ============================================================
     スクロール進捗バーとタイトルバーの重なり解消（2026-08-20）
     進捗バーはヘッダー下端(PC119/SP95px)に固定されており、
     同じ位置に吸着するタイトルバーと重なっていた。
     タイトルバー表示中はその下端へ退避させる（高さは JS が --tb-h に実測値を入れる）。
     ============================================================ */
  /* 進捗バーはヘッダー直下（タイトルバーの上）に置き、タイトルバーはその厚み分だけ下げる。
     PC/SP 共通の並び: ヘッダー → 進捗バー → タイトルバー
     ※ sac-mag.css では SP 用 `.scrollprog{top:95px}` がベース宣言(top:119px)より
       前に書かれており上書きされていた（SPで進捗バーがタイトルバーを横切る原因）。
       ここで読み込み順が後になるため、ヘッダー高さに正しく合わせて再指定する。 */
  /* ヘッダー下端(PC121/SP97px = 高さ+ボーダー1px)にタイトルバーを密着させ、
     進捗バーはその上（ヘッダー下端に接する位置）に置く。3者の隙間をゼロにする。 */
  .scrollprog{ top:118px; }
  .title-bar{ top:121px; }
  @media (max-width:860px){
    .scrollprog{ top:94px; }
    .title-bar{ top:97px; }
  }

  /* ------------------------------------------------------------
     SP: タイトルをティッカー（横スクロール）表示にする
     PC は従来どおり1行＋省略記号。
     ------------------------------------------------------------ */
  .title-bar .tb-tick{ display:inline; }
  .title-bar .tb-seg + .tb-seg{ display:none; }

  @media (max-width:980px){
    .title-bar .tb-title{ text-overflow:clip; }
    .title-bar .tb-tick{
      display:inline-flex; width:max-content;
      animation:tb-ticker 18s linear infinite;
    }
    .title-bar .tb-seg{ padding-right:56px; }
    .title-bar .tb-seg + .tb-seg{ display:inline; }
    /* 収まりきる短いタイトルは流さない（JSが .tb-fit を付与） */
    .title-bar.tb-fit .tb-tick{ animation:none; }
    .title-bar.tb-fit .tb-seg + .tb-seg{ display:none; }
  }
  @keyframes tb-ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  @media (prefers-reduced-motion:reduce){
    .title-bar .tb-tick{ animation:none; }
  }

  /* ============================================================
     本文スペーシングの統一スケール（2026-08-20）
     これまでは目次の上(50px)と下(44px)が不揃い、サブコピーが天井に密着、
     見出しの前後が本文と同じ間隔でリズムが無い、という状態だった。
     PC: 32 / 44 / 72 / 24、SP: 24 / 28 / 48 / 20 の4値に整理する。
     ------------------------------------------------------------
       ① サブコピー上          … 記事の入り口に余白を作る
       ② 本文の始まり          … 目次の「上」を「下」と同値にする
       ③ 見出しの前            … 章の切れ目を明確にする
       ④ 見出しの直後          … 見出しと本文を近づけて一体に見せる
     ============================================================ */
  .main-col .deck{ margin-top:32px; }                                     /* ① */
  .layout .body-wrap{ padding-top:44px; }                                  /* ② = module間と同値 */
  /* 通常のブロック間（見出し規則より前に置き、以降の規則が上書きできるようにする） */
  .layout .main-col .body-wrap > .module + .module{ margin-top:44px; }
  .layout .main-col .body-wrap > .module.m-heading{ margin-top:72px; }     /* ③ */
  .layout .main-col .body-wrap > .m-heading + .module{ margin-top:24px; }  /* ④ */
  /* 章見出しが本文の先頭に来る場合は上余白を二重に取らない */
  .layout .main-col .body-wrap > .module.m-heading:first-child{ margin-top:0; }
  /* 編集者情報（Supervised by）はセクション扱いで少し広めに */
  .main-col .author-foot{ margin-top:64px; }

  @media (max-width:980px){
    .main-col .deck{ margin-top:24px; }                                    /* ① */
    .layout .body-wrap{ padding-top:28px; }                                /* ② */
    .layout .main-col .body-wrap > .module + .module{ margin-top:28px; }
    .layout .main-col .body-wrap > .module.m-heading{ margin-top:48px; }   /* ③ */
    .layout .main-col .body-wrap > .m-heading + .module{ margin-top:20px; }/* ④ */
    .main-col .author-foot{ margin-top:48px; }
  }

  /* ============================================================
     サブコピーの導入部（2026-08-21 / B案）
     HERO(黒)から白いシートへ、何の説明もなくサブコピーが始まるため
     「唐突」に見えていた。あいだに
       ① メタ帯（著者 / 読了目安 / 公開日）… 黒→白の段差を吸収する踊り場
       ② SUMMARY ラベル                    … この文章が要約だと明示（目次のラベルと同じ様式）
     を挟む。読了目安は本文の文字数から自動算出（CMS入力は不要）。
     ============================================================ */
  .main-col .deck-meta{
    display:flex; align-items:center; flex-wrap:wrap; gap:14px;
    margin:32px 0 26px; padding-bottom:18px; border-bottom:1px solid var(--line-2);
    font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--ink-3);
  }
  .main-col .deck-meta .av{
    width:34px; height:34px; border-radius:50%; overflow:hidden; flex:0 0 auto;
    background:var(--paper-3);
  }
  .main-col .deck-meta .av img{ width:100%; height:100%; object-fit:cover; display:block; }
  .main-col .deck-meta .nm{
    font-family:inherit; font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--ink-2);
  }
  .main-col .deck-meta .sep{ color:var(--line); }
  .main-col .deck-meta .sub{ display:flex; align-items:center; gap:14px; }

  .main-col .deck-lbl{
    display:flex; align-items:center; gap:10px; margin:0 0 14px;
    font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#2f6e12;
  }
  .main-col .deck-lbl::before{ content:""; width:22px; height:1px; background:#2f6e12; flex:0 0 auto; }
  .main-col .deck-lbl b{ font-weight:400; }

  /* 上の余白はメタ帯が受け持つので、サブコピー自身の上余白は無くす */
  .main-col .deck{ margin-top:0; }

  @media (max-width:980px){
    .main-col .deck-meta{ margin:24px 0 20px; padding-bottom:14px; gap:10px; font-size:11px; }
    .main-col .deck-meta .av{ width:30px; height:30px; }
    .main-col .deck-meta .nm{ font-size:12.5px; }
    /* 名前が長いと flex では3段に崩れるため、
       グリッドで「左=アバター固定 / 右=名前・READ の2段」に組む */
    .main-col .deck-meta{
      display:grid; grid-template-columns:auto minmax(0,1fr);
      grid-template-areas:"av nm" "av sub";
      align-items:center; column-gap:10px; row-gap:4px;
    }
    .main-col .deck-meta .av{ grid-area:av; }
    .main-col .deck-meta .nm{ grid-area:nm; }
    .main-col .deck-meta .sub{ grid-area:sub; gap:10px; }
    .main-col .deck-meta .sub > .sep:first-child{ display:none; }
    .main-col .deck-lbl{ margin-bottom:12px; font-size:10.5px; letter-spacing:.16em; }
  }

  /* ============================================================
     2026-09-10 小坂様ご指示（SP表示の文字サイズ・折り返し）
     ・この追記は article-page.css の末尾。読み込み順は
       sac-mag.css → modules-rich.css → site-extra.css → article-page.css なので、
       基本定義より必ず後に効く（media クエリの上書き順の事故を防ぐため末尾固定）。
     ・PC の見え方は一切変えない。すべて max-width クエリの中だけで閉じている。
     ============================================================ */

  /* ① Let's talk（quietcta）の見出し。
     見出し文言は記事ごとに可変で、長いものは SP で 6 行まで伸びていた。
     実測（375px）: font-size 27.75px / line-height 37.46px。
     clamp の下限 24px・7.4vw が効いて大きすぎるため、SP だけ一段落とす。
     375px で 21px、320px で 20px、430px で 22.4px 程度に収まる。 */
  @media (max-width:860px){
    .quietcta h2{
      font-size:clamp(20px,5.6vw,26px);
      line-height:1.42;
      letter-spacing:-.005em;
      /* 単語の途中で切らない（日本語の折り返し品質） */
      word-break:auto-phrase;
      overflow-wrap:break-word;
    }
  }

  /* ② 記事一覧への導線ボタン。
     実測（375px）: ボタン 331×83px で 3 行。
       .lc-eye  「All Articles」        106px / 2 行
       .lc-main 「記事一覧をすべて見る」 129px / 2 行
     原因は inline-flex の子が横に並びきらず、各要素の中で折り返していたこと。
     white-space:nowrap だけだと狭い端末で外へはみ出すので、
     SP では「ラベル(lc-eye)を畳んで」main と矢印の 2 要素にし、
     ボタン自体を幅いっぱいのブロックにして 1 行に収める。 */
  @media (max-width:860px){
    .list-cta-btn{
      display:flex; width:100%; max-width:340px; margin:0 auto;
      justify-content:center; align-items:center; gap:10px;
      padding:16px 20px;
      /* 中身が伸びても外へ出さない */
      box-sizing:border-box;
    }
    /* 「All Articles」は main と重複する情報なので SP では出さない。
       読み上げには残したいので display:none ではなく視覚的にだけ隠す。 */
    .list-cta-btn .lc-eye{
      position:absolute; width:1px; height:1px; margin:-1px;
      overflow:hidden; clip-path:inset(50%); white-space:nowrap;
    }
    .list-cta-btn .lc-main{
      font-size:14px; white-space:nowrap;
      /* 万一入りきらない端末でも溢れさせない */
      min-width:0; overflow:hidden; text-overflow:ellipsis;
    }
    .list-cta-btn .lc-arr{ flex:none; }
  }