/* ══ トップページのスマホ・タブレットの組み立て（2026-10-17 K 採用「案B1 カードを送る」）════════════════════════
   提案：/Users/k/Projects/LUMEN/20-open/スマホ・タブレット_B改_20261016/（board/css/m.css・b1.css をまとめたもの）。
   読むのはトップ（index.html）だけ。<html data-m> のときに効く。スマホ（〜640px）とタブレット縦（641〜1023px）だけで、パソコン（1024px〜）は変えない。
   棚（.m-shelf）・下の帯（.m-bar）・章の札（.m-chips）などは js/noren-m.js が作る
   【決まり】
   ・左右の余白：スマホ 20px／タブレット 40px。節の上下：スマホ 80px／タブレット 104px。見出し→中身：スマホ 36px／タブレット 48px
   ・文字の段：章の見出し 26/34px・小見出し 20/24px・本文 15/16px・注記 13px。数字は Inter
   ・改行は文節の切れ目だけ（本文に <wbr> を入れ、word-break:keep-all）
   ・本番の絵（アプリの画面・サイトの画面・図）は切り抜かない・拡大しない。パソコンでの組み立てのまま、入る大きさまで全体を縮小する（.m-fit）
   ・人物の写真は小さく。段の中の絵は、同じ高さの台（--stage）の中に収めて、カードの高さをそろえる
   ・カードの角丸 22px・内側 22/20px。棚のカードの幅：スマホ＝画面−64px（次のカードが 32px 見える）／タブレット＝2枚＋次が見える
   ・ボタン：藍のスペースグラス（主）と白いガラス（副）。2つ並ぶときは藍と白の組 */

@media (max-width:1023px){
  html[data-m]{--m-g:20px;--m-sec:80px;--m-gap:36px;--m-r:22px;--m-cw:calc(100vw - var(--m-g) * 2 - 24px);
    --m-ink:#0b1730;--m-ink2:#3a465f;--m-ink3:#66728c;--m-line:rgba(11,23,48,.08);--m-blue:#2a56a6;
    --m-sh:0 1px 2px rgba(11,23,48,.05),0 18px 38px -24px rgba(11,23,48,.32);
    --m-sh-d:0 26px 50px -30px rgba(0,0,0,.9);
    --m-ease:cubic-bezier(.2,.7,.2,1);--stage:232px;
    --pad:var(--m-g)}
  html[data-m] .m-gone{display:none!important}

  /* ── 改行：文節の切れ目だけ。行末の取り残し（1〜2文字だけの行）を避ける ── */
  html[data-m] main :where(h1,h2,h3,h4,p,li,dt,dd,th,td,figcaption,summary,small,strong,b,em,span,a,button,label,div){word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
  html[data-m] main :where(p,li,dd,figcaption){text-wrap:pretty}
  html[data-m] main :where(h1,h2,h3){text-wrap:balance}

  /* ── 節と章の見出し ── */
  html[data-m] .chapter{padding:var(--m-sec) 0}
  html[data-m] .chapter-head{margin-bottom:var(--m-gap)}
  html[data-m] .chapter-head .eyebrow,html[data-m] .pv3-head .eyebrow,html[data-m] .claim .eyebrow,html[data-m] .hm-head .eyebrow,html[data-m] .wr .eyebrow,html[data-m] .split .eyebrow{font-size:11.5px;letter-spacing:.2em;margin-bottom:12px}
  html[data-m] .h-xl{font-size:clamp(22px,6.7vw,26px);line-height:1.45;letter-spacing:.01em}
  html[data-m] .h-lg{font-size:21px;line-height:1.5;letter-spacing:.01em}
  html[data-m] .chapter-head .lead,html[data-m] .claim .lead,html[data-m] .hm-head .lead,html[data-m] .wr .lead,html[data-m] .split .lead{font-size:15px;line-height:1.9;margin-top:14px}
  html[data-m] .lead.lines span{display:block}
  html[data-m] .lead.lines span+span{margin-top:2px}

  /* ── ヘッダー：章へ跳ぶ札（最初の画面のボタンが画面の外に出たら出る） ──
     ★ヘッダーのすぐ下に置く（2026-10-17 持ち主「ヘッダーに埋もれてタップしづらい」）。ヘッダーは全ページ 80px（noren-fv.css の --hdr）なのに
     札を 64px（タブレット 72px）の位置に置いていて、札の上 8〜16px がヘッダーの下に潜っていた。押せる範囲は帯の高さいっぱい（札の上下の余白も札） */
  html[data-m] .m-chips{position:fixed;left:0;right:0;top:var(--hdr,80px);z-index:45;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:7px var(--m-g) 8px;
    background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);box-shadow:0 1px 0 rgba(11,23,48,.07);
    transform:translateY(-100%);opacity:0;transition:transform .45s var(--m-ease),opacity .3s}
  html[data-m] .m-chips::-webkit-scrollbar{display:none}
  html[data-m].m-on .m-chips{transform:none;opacity:1}
  html[data-m].m-on .site-header{border-bottom-color:transparent}   /* 札が出ている間は、ヘッダーと札を1枚の白い帯に見せる（間の線を消す） */
  html[data-m] .m-chips a{position:relative;flex:none;display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:#26324d;text-decoration:none;background:#f0f3f8}
  html[data-m] .m-chips a.on{color:#fff;background:linear-gradient(180deg,#3a5aa6,#13285c)}
  html[data-m] .m-chips a::after{content:"";position:absolute;inset:-7px -3px -8px}
  html[data-m] main section[id]{scroll-margin-top:calc(var(--hdr,80px) + 49px + 12px)}   /* 跳んだ先の見出しが、ヘッダー＋札（49px）の下から読める */

  /* ── 下の帯：無料で診断（白）＋ホームページを作る（藍） ──
     ★隠れている間は見えなくする（2026-10-17 持ち主「出てくるタイミングやカクツキ」・iPhone 15 Pro Max／iOS 26.5 の Safari で録画して確認）。
     iOS 26 の Safari は画面の下の端までページを描き、スクロールで下のバーが小さくなると、画面の外へ下げただけの帯が下の端から半分のぞいていた
     （最初の画面のボタンが見えている間から、帯が中途半端に見えていた）。下げ終わったら visibility で消す。
     ★左右は 28px あける。iOS 26 の Safari は、横幅いっぱいに近い固定の帯が下の端にあると、その下（縮んだバーのまわり）を帯の色の板で埋める。
     左右 12px では、帯が出る瞬間に白い板（高さ約60px）がいきなり現れて本文を隠していた（カクつきに見えた主因）。同じ録画で 20px は出たり出なかったり・28px は出ない */
  html[data-m] .m-bar{position:fixed;left:28px;right:28px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:70;display:flex;gap:8px;padding:7px;border-radius:26px;
    background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
    box-shadow:0 0 0 1px rgba(11,23,48,.07),0 22px 44px -20px rgba(11,23,48,.55);
    transform:translateY(calc(100% + 28px));opacity:0;visibility:hidden;transition:transform .45s var(--m-ease),opacity .2s,visibility 0s linear .45s}
  html[data-m] .m-bar.is-on{transform:none;opacity:1;visibility:visible;transition:transform .45s var(--m-ease),opacity .2s,visibility 0s}
  html[data-m] .m-bar a{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:0 10px;border:1px solid transparent;border-radius:999px;
    font-weight:700;font-size:14.5px;letter-spacing:.04em;text-decoration:none;white-space:nowrap}
  html[data-m] .m-bar-w{color:#13285c;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(242,245,250,.9)) padding-box,linear-gradient(180deg,#fff,rgba(11,23,48,.12) 50%,rgba(11,23,48,.22)) border-box;
    box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(11,23,48,.06),0 8px 18px -12px rgba(11,23,48,.35)}
  html[data-m] .m-bar-n{flex-grow:1.45!important;color:#fff;text-shadow:0 1px 1px rgba(4,12,40,.35);
    background:radial-gradient(120% 130% at 50% -38%,rgba(255,255,255,.34) 0%,rgba(255,255,255,0) 62%) padding-box,linear-gradient(180deg,#3a5aa6,#13285c) padding-box,linear-gradient(180deg,rgba(255,255,255,.72),rgba(170,195,250,.22) 46%,rgba(120,150,230,.4)) border-box;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 12px 24px -14px rgba(14,32,84,.8)}
  html[data-m] .m-bar svg{width:15px;height:15px;flex:none}
  @media (max-width:359px){html[data-m] .m-bar{gap:6px;padding:6px}html[data-m] .m-bar a{padding:0 6px;font-size:13px;letter-spacing:.02em}}   /* 左右 28px あけた分、320px で「ホームページを作る →」が 8px はみ出していた */
  html[data-m] .totop{transition:opacity .3s,transform .3s,bottom .45s var(--m-ease)}
  html[data-m] .totop{display:none!important}   /* 「↑」は出さない：上の札で章へ跳べ、下の帯と重なって本文を隠していたため */

  /* ══ 最初の画面 ══════════════════════════════════════════════════ */
  /* アプリの画面は本番と同じもの（斜めの端末・今月のまとめ → AIチャットの動き・傾き・縁・影）。見た目は変えず、置き場所だけ「説明とボタンの間」に */
  html[data-m] .hg-inner{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:84px 0 36px}   /* 本番の段の間隔（gap）は外し、間隔は下の margin だけで決める */
  html[data-m] .hg-copy{display:contents}
  html[data-m] .hg-title{order:1;font-size:clamp(25px,7.7vw,30px);line-height:1.42;letter-spacing:.005em}
  html[data-m] .hg-lead{order:2;margin-top:14px;font-size:15px;line-height:1.85;letter-spacing:.01em}
  html[data-m] .hg-app{order:3;margin-top:24px}
  html[data-m] .hg-ctas{order:4;flex-direction:column;gap:14px;margin-top:20px}
  html[data-m] .hg-cta{width:100%;gap:7px}
  html[data-m] .hg-cta-for{font-size:12px;letter-spacing:.06em}
  html[data-m] .hg-btn{width:100%;min-height:54px;font-size:15.5px}
  html[data-m] .hg-cta-note{font-size:12px;line-height:1.5}

  /* 価格の板（案C）：上下の余白と字の段をそろえる */
  html[data-m] .hg-camp-in{width:calc(100% - var(--m-g) * 2);padding:6px 0 26px}
  html[data-m] .hg-camp-panel{border-radius:18px}
  html[data-m] .hg-camp-tag{padding:14px 16px 12px;gap:5px}
  html[data-m] .hg-camp-tag small{font-size:10px;letter-spacing:.26em}
  html[data-m] .hg-camp-tag b{font-size:15px}
  html[data-m] .hg-camp-body{padding:16px 18px 18px;gap:8px}
  html[data-m] .hg-camp-l{font-size:14px}
  html[data-m] .hg-camp-was{font-size:15px}
  html[data-m] .hg-camp-z b{font-size:44px}
  html[data-m] .hg-camp-z .y{font-size:19px}
  html[data-m] .hg-camp-z small{font-size:12px}
  html[data-m] .hg-camp-cond{font-size:12.5px;line-height:1.75}
  /* 測れるもの：見出し → 3つを横に等分 → 説明 */
  html[data-m] .hg-meas-in{width:calc(100% - var(--m-g) * 2);display:block;padding:34px 0 38px;text-align:center}
  html[data-m] .hg-meas-h{padding:0;border:0;font-size:20px;line-height:1.55}
  html[data-m] .hg-meas-r{padding:0;margin-top:20px}
  html[data-m] .hg-meas-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0 0 18px;border-bottom:1px solid #d9e0ea}
  html[data-m] .hg-meas-list li{flex-direction:column;justify-content:flex-start;gap:9px;font-size:13px;line-height:1.4;white-space:normal;text-align:center}
  html[data-m] .hg-meas-list svg{width:26px;height:26px}
  html[data-m] .hg-meas-note{margin-top:14px;font-size:13.5px;line-height:1.75}

  /* ══ ご提供するもの（暗い地）══════════════════════════════════════════ */
  html[data-m] .ns-incl .sp-val{padding:var(--m-sec) 0}
  html[data-m] .ns-incl .sp-wrap{width:calc(100% - var(--m-g) * 2)}
  html[data-m] .ns-incl .sp-val .sp-h2{font-size:clamp(22px,6.7vw,26px);line-height:1.45;margin-top:12px}
  html[data-m] .ns-incl .vx-br{display:inline}
  html[data-m] .ns-incl .vx-lead{font-size:14.5px;line-height:1.85;margin-top:14px}
  html[data-m] .ns-incl .vx-head{margin-bottom:var(--m-gap)}
  /* 棚の入れ物：デスクトップ用の枠（格子・地の色・縁）は外す */
  html[data-m] .ns-incl .vx-frame.m-shelf{display:block;margin-top:0;padding:0;border-radius:0;background:none;box-shadow:none}
  /* 棚のカード（暗い地）：［ホームページ制作］［運用アプリ］ */
  html[data-m] .m-dark .m-card{background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));border-radius:var(--m-r);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),var(--m-sh-d)}
  html[data-m] .ns-incl .m-card{display:flex;flex-direction:column;padding:22px 20px 20px}
  html[data-m] .ns-incl .vx-make,html[data-m] .ns-incl .vx-app{padding:0;background:none;box-shadow:none;border-radius:0}
  html[data-m] .ns-incl .vx-make::after,html[data-m] .ns-incl .vx-app::after{display:none}
  html[data-m] .ns-incl .vx-make h3,html[data-m] .ns-incl .vx-app h3,html[data-m] .ns-incl .vx-ah h3{margin:12px 0 0;font-size:22px;line-height:1.35}
  html[data-m] .ns-incl .vx-d{margin-top:8px;font-size:14px;line-height:1.75}
  html[data-m] .ns-incl .vx-list{margin-top:18px}
  html[data-m] .ns-incl .vx-list>div{padding:11px 2px}
  html[data-m] .ns-incl .vx-list dt{font-size:14px}
  html[data-m] .ns-incl .vx-list dd{font-size:21px}
  html[data-m] .ns-incl .vx-fee{margin-top:16px;padding-top:14px}
  html[data-m] .ns-incl .vx-fee b{font-size:34px}
  html[data-m] .ns-incl .vx-makecol .sp-btn.vx-makebtn{width:100%;margin-top:auto;min-height:54px;border-radius:999px;font-size:15px}
  html[data-m] .ns-incl .vx-makecol .vx-make{margin-bottom:20px}
  /* 運用アプリ：見出し → 監視の札 → 画面（本番と同じ。全体を縮小して丸ごと見せる）→ 改善サイクル（本番のまま） */
  html[data-m] .ns-incl .vx-ah{display:block}
  html[data-m] .ns-incl .vx-ah .vx-tag{justify-content:flex-start}
  html[data-m] .ns-incl .vx-tag .m-deliv{margin-left:auto;font-style:normal;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font:700 11px/1 var(--head,var(--sans));letter-spacing:.14em;color:#cfdcff;background:rgba(111,156,255,.14);box-shadow:inset 0 0 0 1px rgba(143,180,255,.3)}
  html[data-m] .ns-incl .vx-tag .m-deliv::before{content:"";width:12px;height:1px;background:currentColor;opacity:.7}
  html[data-m] .ns-incl .vx-ah .ttl{margin-top:2px}
  html[data-m] .ns-incl .vx-watch{margin:14px 0 0;padding:10px 12px;border-radius:12px;font-size:12px;line-height:1.5}
  html[data-m] .ns-incl .vx-body{display:block;margin-top:16px}
  html[data-m] .ns-incl .vx-screen{display:block}
  html[data-m] .ns-incl .vx-flow{margin-top:14px}
  html[data-m] .ns-incl .vx-fh{font-size:15px;line-height:1.55}
  html[data-m] .ns-incl .vx-steps b{font-size:14.5px}
  html[data-m] .ns-incl .vx-steps .t{font-size:12.5px;line-height:1.7}
  /* アプリでできること：4つを1枚の面に、行で並べる（項目は「・」でつなぐ） */
  html[data-m] .ns-incl .m-gen{display:block;margin-top:14px;padding:4px 18px;border-radius:var(--m-r);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
  html[data-m] .ns-incl .m-gen .vx-g{display:block;min-width:0;margin:0;padding:18px 0;border-radius:0;background:none;box-shadow:none;border-top:1px solid rgba(255,255,255,.08)}
  html[data-m] .ns-incl .m-gen .vx-g:first-child{border-top:0}
  html[data-m] .ns-incl .m-gen .vx-g::before{display:none}
  html[data-m] .ns-incl .m-gen .vx-g .h{margin:0;font-size:15px;gap:10px}
  html[data-m] .ns-incl .m-gen .vx-g>ul,html[data-m] .ns-incl .m-gen .vx-g .lead,html[data-m] .ns-incl .m-gen .vx-g .ex,html[data-m] .ns-incl .m-gen .vx-g .marks{margin:9px 0 0 38px}
  html[data-m] .ns-incl .m-gen .vx-g ul{display:block;padding:0}
  html[data-m] .ns-incl .m-gen .vx-g li{display:inline;padding:0;font-size:13px;line-height:1.8;color:#c9d2ea}
  html[data-m] .ns-incl .m-gen .vx-g li::before{display:none}
  html[data-m] .ns-incl .m-gen .vx-g li+li::after{content:none}
  html[data-m] .ns-incl .m-gen .vx-g li:not(:last-child)::after{content:"・";display:inline;color:#6f7ea6}
  html[data-m] .ns-incl .m-gen .vx-g .lead{font-size:13px;line-height:1.8;color:#dfe6ff}
  html[data-m] .ns-incl .m-gen .vx-g .ex{padding:0;background:none;box-shadow:none;border:0}
  html[data-m] .ns-incl .m-gen .vx-g .ex-h{display:inline;margin:0 4px 0 0;font-size:12px;color:#8d98bb}
  html[data-m] .ns-incl .m-gen .vx-g .ex ul{display:inline;margin:0}
  html[data-m] .ns-incl .m-gen .vx-g .marks{display:flex;gap:6px;flex-wrap:wrap}
  html[data-m] .ns-incl .m-gen .vx-g .mark{width:28px;height:28px}

  /* ══ 横に送る棚（B1 の既定。B2・B3 は自分の CSS で上書き）═════════════════════════ */
  html[data-m] .m-shelf{position:relative;min-width:0;max-width:none;margin:0 calc(var(--m-g) * -1);text-align:left}
  html[data-m] .m-track{contain:inline-size;min-width:0;display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:4px var(--m-g) 30px;scroll-padding-inline:var(--m-g);align-items:stretch}
  html[data-m] .m-track::-webkit-scrollbar{display:none}
  html[data-m] .m-card{flex:0 0 var(--m-cw);width:var(--m-cw);max-width:none;min-width:0;margin:0;scroll-snap-align:start;scroll-snap-stop:always}
  html[data-m] [data-shelf="ways"] .m-card,html[data-m] [data-shelf="flow"] .m-card,html[data-m] [data-shelf="writing"] .m-card:not(.wr-aeo){background:#fff;border-radius:var(--m-r);box-shadow:0 0 0 1px var(--m-line),var(--m-sh)}
  html[data-m] [data-shelf="plans"] .m-card{border-radius:var(--m-r)}

  /* ══ 数字の帯（暗い地）════════════════════════════════════════════ */
  html[data-m] .stats{padding:46px 0 48px}
  html[data-m] .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  html[data-m] .stats .stat{padding:20px 14px 22px 0;border:0;border-top:1px solid rgba(255,255,255,.1)}
  html[data-m] .stats .stat:nth-child(even){padding-left:16px;border-left:1px solid rgba(255,255,255,.08)}
  html[data-m] .stats .stat:nth-child(-n+2){border-top:0;padding-top:4px}
  html[data-m] .stats .stat .n{font-size:38px;line-height:1}
  html[data-m] .stats .stat .n small{font-size:13px;margin-left:3px}
  html[data-m] .stats .stat .cap{margin-top:10px;font-size:12.5px;line-height:1.7}
  html[data-m] .stats .stat::after,html[data-m] .stats .stat::before{display:none}
  html[data-m] .stats .stat .ul{display:none}
  html[data-m] .stats .stat:nth-child(3){border-left:0}
  html[data-m] .stats-grid{border-top:0}

  /* ══ カタログ：見出しと説明の文字の段だけそろえる。ロール（.catalog）は本番のまま ═══════════════════ */
  html[data-m] #make{padding:var(--m-sec) 0 calc(var(--m-sec) - 14px)}
  html[data-m] #make .catalog-head h3{font-size:22px;line-height:1.45}
  html[data-m] #make .catalog-head p{margin-top:14px;font-size:14.5px;line-height:1.9}
}

/* ══ タブレット縦（641〜1023px）══════════════════════════════════════════ */
@media (min-width:641px) and (max-width:1023px){
  html[data-m]{--m-g:40px;--m-sec:104px;--m-gap:48px;--m-cw:calc((100vw - var(--m-g) - 16px - 76px) / 2)}
  html[data-m] .h-xl{font-size:34px;line-height:1.4}
  html[data-m] .h-lg{font-size:25px}
  html[data-m] .chapter-head .lead{font-size:16px}
  html[data-m] .m-chips{justify-content:center}
  html[data-m] .m-bar{left:50%;right:auto;width:min(560px,calc(100% - 64px));transform:translate(-50%,calc(100% + 28px))}
  html[data-m] .m-bar.is-on{transform:translate(-50%,0)}
  /* 最初の画面：左に見出しとボタン、右にアプリの画面 */
  html[data-m] .hg-inner{padding:124px 0 56px}
  html[data-m] .hg-title{font-size:42px;line-height:1.36}
  html[data-m] .hg-title .hg-ln{display:inline}
  html[data-m] .hg-title .hg-ln:first-child::after{content:"\A";white-space:pre}
  html[data-m] .hg-lead{font-size:16.5px;margin-top:18px}
  html[data-m] .hg-app{margin-top:34px}
  html[data-m] .hg-ctas{flex-direction:row;gap:14px;margin-top:30px}
  html[data-m] .hg-cta{flex:1 1 0}
  html[data-m] .hg-camp-in{padding:10px 0 34px}
  html[data-m] .hg-camp-panel{grid-template-columns:auto minmax(0,1fr)}
  html[data-m] .hg-camp-tag{align-items:flex-start;text-align:left;padding:18px 24px}
  html[data-m] .hg-camp-tag b br{display:inline}
  html[data-m] .hg-camp-body{align-items:flex-start;text-align:left;padding:18px 26px}
  html[data-m] .hg-camp-v{flex-direction:row;align-items:baseline;gap:4px 14px}
  html[data-m] .hg-meas-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;align-items:center;text-align:left;padding:40px 0 44px}
  html[data-m] .hg-meas-r{margin-top:0}
  html[data-m] .hg-meas-list li{flex-direction:row;justify-content:center;gap:8px;text-align:left}
  /* ご提供するもの：アプリでできることは4列 */
  html[data-m] .ns-incl .m-gen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;padding:6px 26px}
  html[data-m] .ns-incl .m-gen .vx-g:nth-child(2){border-top:0}
  /* 数字の帯：4列 */
  html[data-m] .stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  html[data-m] .stats .stat,html[data-m] .stats .stat:nth-child(even){padding:4px 14px 6px 18px;border:0;border-left:1px solid rgba(255,255,255,.1)}
  html[data-m] .stats .stat:first-child{border-left:0;padding-left:0}
}

/* ══ 測る（02）══════════════════════════════════════════════════════ */
@media (max-width:1023px){
  /* 本番の絵を縮小して入れる入れ物（共通） */
  html[data-m] .m-fit{display:flex;justify-content:center;align-items:center;width:100%;overflow:hidden}
  html[data-m] .m-fit-in{flex:none;max-width:none!important;margin:0!important}
  /* 55項目の診断：本番の画面（吹き出し・札・走査の光を含む）を、パソコンでの組み立てのまま縮小 */
  html[data-m] #measure .scan{display:block;margin-top:0;border-radius:var(--m-r)}
  html[data-m] #measure .scan-l{padding:14px 14px 0}
  html[data-m] #measure .scan-l>.m-fit{border-radius:10px}
  html[data-m] #measure .scan .m-fit-in .hud{white-space:nowrap;max-width:none}
  html[data-m] #measure .scan-r{padding:18px 16px;border-left:0;border-top:0;background:none}
  html[data-m] #measure .scan .url{padding:10px 14px;font-size:13px}
  html[data-m] #measure .scan .count{margin-top:16px}
  html[data-m] #measure .scan .count b{font-size:46px}
  html[data-m] #measure .scan .count span{font-size:13px}
  html[data-m] #measure .scan .cats{margin-top:14px;gap:8px}
  html[data-m] #measure .scan .cats div{grid-template-columns:84px minmax(0,1fr) 46px;gap:10px;font-size:12.5px}
  html[data-m] #measure .scan .found{margin-top:16px;padding-top:14px;font-size:13px;line-height:1.7}
  /* 見つかる場所：棚のカード。上に同じ高さの台（ロゴ・計器）、その下に文 */
  html[data-m] #measure .ways.m-shelf{display:block;margin-top:14px}
  html[data-m] #measure .way{display:flex;flex-direction:column;padding:20px 20px 22px;border:0;overflow:visible}
  html[data-m] #measure .way .marks,html[data-m] #measure .way .viz{order:-1;height:92px;margin:0 0 6px;padding:0;display:flex;align-items:center;justify-content:flex-start;gap:8px}
  html[data-m] #measure .way .mark{width:44px;height:44px;border-radius:12px}
  html[data-m] #measure .way .mark img{width:23px;height:23px}
  html[data-m] #measure .way .viz .gauge{width:132px;max-width:132px;margin:0}
  html[data-m] #measure .way .viz .pulse{width:100%;height:70px}
  html[data-m] #measure .way .k{margin-top:10px;font-size:11px}
  html[data-m] #measure .way h3{margin-top:6px;font-size:18px;line-height:1.5}
  html[data-m] #measure .way p{margin-top:8px;font-size:14px;line-height:1.75}
  /* ヒートマップ：見出しのまとまり（中央）→ 本番の絵（縮小）→ 3つの数字 */
  html[data-m] #measure .hm-head{display:block;margin-top:72px;text-align:center}
  html[data-m] #measure .hm-head>div+div{margin-top:14px}
  html[data-m] #measure .hm-head .big{font-size:52px;line-height:1}
  html[data-m] #measure .hm-head .big small{font-size:14px}
  html[data-m] #measure .hm-head .lead{margin-inline:auto}
  html[data-m] #measure .hm{display:block;margin-top:28px}
  html[data-m] #measure .hm>.m-fit{border-radius:14px;box-shadow:0 0 0 1px var(--m-line),var(--m-sh)}
  html[data-m] #measure .hm-side{margin-top:14px;display:grid;gap:8px}
  html[data-m] #measure .hm-side .lg{display:grid;grid-template-columns:76px minmax(0,1fr);grid-template-areas:"b s" "b t";column-gap:12px;row-gap:2px;align-items:center;padding:14px 16px;border-radius:16px}
  html[data-m] #measure .hm-side .lg b{grid-area:b;font-size:28px;line-height:1}
  html[data-m] #measure .hm-side .lg strong{grid-area:s;font-size:14px;line-height:1.5}
  html[data-m] #measure .hm-side .lg span{grid-area:t;font-size:12.5px;line-height:1.6}
  html[data-m] #measure .hm-cta{margin-top:4px;padding:10px 0 0;background:none;box-shadow:none;color:var(--m-blue);font-size:13px;font-weight:700;text-align:center}
  /* 改善の流れ：つなぎの一文 → 3枚の棚。どのカードも同じ高さの台の中に絵を収める（人物の写真は小さく） */
  html[data-m] #measure .chain{display:block;margin:64px 0 18px;text-align:center}
  html[data-m] #measure .chain svg{display:none}
  html[data-m] #measure .chain .lbl{display:block;padding:0;background:none;box-shadow:none;border:0;font-size:14.5px;line-height:1.85;color:var(--m-ink2)}
  html[data-m] #measure .flow3.m-shelf{display:block;margin-top:0}
  html[data-m] #measure .flow3 .f{display:flex;flex-direction:column;padding:20px 18px 18px;border:0}
  html[data-m] #measure .flow3 .hd{display:flex;align-items:center;gap:10px}
  html[data-m] #measure .flow3 .hd .n{flex:none;width:26px;height:26px;font-size:13px}
  html[data-m] #measure .flow3 .hd b{font-size:16px}
  html[data-m] #measure .flow3 .vis{flex:none;height:200px;margin-top:14px;padding:12px;display:flex;align-items:center;justify-content:center;border-radius:16px;background:linear-gradient(180deg,#f5f7fb,#eef2f8);box-shadow:inset 0 0 0 1px rgba(11,23,48,.04)}
  html[data-m] #measure .flow3 .vis>.m-fit{--fit-h:176px}
  /* 本番のスマホ用の指定（改善カードを1列に）は、縮小する絵の中では効かせない＝パソコンと同じ2列のまま */
  html[data-m] #measure .flow3 .m-fit-in.icards--sm{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* ②の写真は台いっぱいに敷く（台の中で小さく浮かせない）。台の高さを抑えてあるので、人物は大きくならない */
  html[data-m] #measure .flow3 .vis:has(.shotw){padding:0;overflow:hidden}
  html[data-m] #measure .flow3 .shotw{display:block;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:cover;object-position:62% 40%;border-radius:0}
  html[data-m] #measure .flow3 .clock{width:118px}
  html[data-m] #measure .flow3 .f>small{display:block;margin-top:14px;font-size:13px;line-height:1.7;color:var(--m-ink2)}
  /* 競合：見出しのまとまり（中央）→ 市場での現在地の画面（本番の組み立てのまま縮小） */
  html[data-m] #measure .claim{display:block;margin-top:80px}
  html[data-m] #measure .claim>div:first-child{text-align:center}
  html[data-m] #measure .claim .big{font-size:60px}
  html[data-m] #measure .claim .big small{font-size:15px}
  html[data-m] #measure .claim .h-lg{margin-top:10px}
  html[data-m] #measure .claim .lead{margin-inline:auto}
  html[data-m] #measure .claim .ask{margin-top:16px;font-size:14.5px;line-height:1.75}
  html[data-m] #measure .claim>.m-fit{margin-top:28px;overflow:visible}
}
@media (min-width:641px) and (max-width:1023px){
  html[data-m] #measure .scan-l{padding:20px 20px 0}
  html[data-m] #measure .scan-r{padding:20px 24px 22px}
  html[data-m] #measure .hm-side{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px}
  html[data-m] #measure .hm-side .lg{grid-template-columns:minmax(0,1fr);grid-template-areas:"b" "s" "t";row-gap:6px}
  html[data-m] #measure .hm-side .hm-cta{grid-column:1 / -1}
  html[data-m] #measure .claim>.m-fit .market .cols{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
}

/* ══ 編集（03）・プロが直す（04）══════════════════════════════════════════ */
@media (max-width:1023px){
  /* 編集の動画：暗い面の中に入れる。動画の下の8項目（文字と色〜エフェクト）は、スマホ・タブレットでは出さない（K 2026-10-17） */
  html[data-m] #edit .edv{padding:12px;border-radius:var(--m-r);background:linear-gradient(180deg,#0f1d3c,#0a1430);box-shadow:var(--m-sh-d)}
  html[data-m] #edit .edv::before,html[data-m] #edit .edv::after{display:none}
  html[data-m] #edit .edv-stage{border-radius:14px;overflow:hidden}
  html[data-m] #edit .edv-feats{display:none}
  /* AIが書く：説明の文（中央）→ 記憶の絵（本番のまま縮小）→ 4枚の棚 */
  html[data-m] #edit .split{display:flex;flex-direction:column;gap:0;margin-top:80px!important}
  html[data-m] #edit .split>*{min-width:0;max-width:none;width:100%}
  html[data-m] #edit .split{align-items:stretch}
  html[data-m] #edit .wr-split>.wr{order:1;text-align:center}
  html[data-m] #edit .wr>.m-fit{margin-top:28px;border-radius:var(--m-r);text-align:left}
  html[data-m] #edit .wr .lead{margin-inline:auto}
  html[data-m] #edit .wr-list.m-shelf{display:block;margin:18px calc(var(--m-g) * -1) 0}
  html[data-m] #edit .wr-list .feature{display:flex;flex-direction:column;padding:22px 20px 20px;border:0;text-align:left}
  html[data-m] #edit .wr-list .feature::before{left:20px}
  html[data-m] #edit .wr-list .feature h3{font-size:16.5px;line-height:1.55}
  html[data-m] #edit .wr-list .feature p{margin-top:8px;font-size:14px;line-height:1.75}
  html[data-m] #edit .wr-list .wr-aeo{background:linear-gradient(160deg,#16306a,#0b1a3c)!important;box-shadow:var(--m-sh-d)!important}
  /* カードの高さをそろえる：1〜3枚目は頭に通し番号、4枚目は札の右にロゴを並べて縦を詰める（空いた余白を作らない） */
  html[data-m] #edit .wr-list{counter-reset:wr}
  html[data-m] #edit .wr-list .feature{counter-increment:wr}
  html[data-m] #edit .wr-list .feature:not(.wr-aeo)>div::before{content:counter(wr,decimal-leading-zero);display:block;margin:0 0 14px;font:600 30px/1 "Inter",var(--sans);letter-spacing:-.02em;color:rgba(42,86,166,.28)}
  html[data-m] #edit .wr-list .wr-aeo>div{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"k m" "h h" "p p";align-items:center;column-gap:10px}
  html[data-m] #edit .wr-list .wr-aeo .wr-k{grid-area:k;margin:0}
  html[data-m] #edit .wr-list .wr-aeo h3{grid-area:h;margin-top:14px}
  html[data-m] #edit .wr-list .wr-aeo>div>p:not(.wr-k){grid-area:p}
  html[data-m] #edit .wr-list .wr-aeo .wr-marks{grid-area:m;justify-self:end;display:flex;flex-wrap:nowrap;gap:3px;margin:0;padding:0}
  html[data-m] #edit .wr-list .wr-aeo .wr-marks span{flex:none;width:21px;height:21px;border-radius:6px}
  html[data-m] #edit .wr-list .wr-aeo .wr-marks img{width:12px;height:12px}
  /* 勝ちパターン：説明の文（中央）→ 分析の画面（本番の組み立てのまま縮小） */
  html[data-m] #edit .split--rev>div:not(.m-fit){order:1;text-align:center}
  html[data-m] #edit .split--rev>.m-fit{order:2;margin-top:28px;overflow:visible}
  html[data-m] #edit .split--rev .lead{margin-inline:auto}

  /* プロが直す：3つの段の棚（暗い地）。どの段も同じ高さの台の中に、本番の絵を縮小して収める（人物の写真は小さく） */
  html[data-m] #pro .relay.m-shelf{display:block}
  html[data-m] #pro .relay .node{display:flex;flex-direction:column;padding:16px 16px 18px}
  html[data-m] #pro .relay .node>.m-fit{flex:none;height:var(--stage);padding:12px;--fit-h:208px;border-radius:16px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
  /* ②プロに届く：写真の札（.pro）は台いっぱいに写真を敷き、「着手しました」を左上、名札を写真の下端に重ねる（台の中で小さく浮かせない） */
  html[data-m] #pro .relay .node>.pro{flex:none;position:relative;height:var(--stage);width:auto;margin:0;padding:0;border-radius:16px;overflow:hidden;background:#0d1a36;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
  html[data-m] #pro .relay .node>.pro img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 38%;border-radius:0}
  html[data-m] #pro .relay .node>.pro .st{position:absolute;left:12px;top:12px;z-index:2}
  html[data-m] #pro .relay .node>.pro .np{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;padding:34px 14px 12px;background:linear-gradient(180deg,rgba(6,12,30,0),rgba(6,12,30,.82) 55%);font-size:11.5px;line-height:1.55;color:rgba(255,255,255,.8)}
  html[data-m] #pro .relay .node>.pro .np b{display:block;font-size:13px;color:#fff}
  html[data-m] #pro .cards3 .icards--sm{grid-template-columns:repeat(3,minmax(0,1fr))}   /* パソコンと同じ3列（本番のスマホ用の1列は使わない） */
  /* 反映後の画面の「総合スコア 77 → 84 +7 ／ 離脱 38% → 24%」：本番（パソコン）でも数字が1字ずつ縦に割れているので、離脱の数字を次の行に送る */
  html[data-m] #pro .m-fit-in.done .score{flex-wrap:wrap;row-gap:6px}
  html[data-m] #pro .m-fit-in.done .score>*{flex:none;white-space:nowrap}
  html[data-m] #pro .m-fit-in.done .score>span:last-child{flex-basis:100%;margin-left:0!important}
  html[data-m] #pro .relay .lbl{margin-top:16px;font-size:13px;line-height:1.7;text-align:left}
  html[data-m] #pro .relay .lbl b{display:block;font-size:16px;margin-bottom:2px}
  html[data-m] #pro .relay-time{margin:10px 0 0}
  html[data-m] #pro .relay-time span{font-size:34px}
  html[data-m] #pro .relay-time small{font-size:13px}
  html[data-m] #pro .feat-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:36px}
  html[data-m] #pro .feat-row .feature{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:18px 14px 16px;border-radius:18px}
  html[data-m] #pro .feat-row .feature .ic{width:38px;height:38px;border-radius:11px}
  html[data-m] #pro .feat-row .feature h3{font-size:14.5px;line-height:1.5}
  html[data-m] #pro .feat-row .feature p{margin-top:6px;font-size:12.5px;line-height:1.7}
}
@media (min-width:641px) and (max-width:1023px){
  html[data-m]{--stage:250px}
  html[data-m] #measure .flow3 .vis{height:210px}
  html[data-m] #measure .flow3 .vis>.m-fit{--fit-h:186px}
  html[data-m] #pro .relay .node>.m-fit{--fit-h:226px}
  html[data-m] #edit .edv{padding:16px}
  html[data-m] #pro .feat-row{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ══ 比べる・料金・締め ═══════════════════════════════════════════════ */
@media (max-width:1023px){
  /* 比べる表：行ごとに［項目名＋制作会社・分析ツール（控えめ）］と［のれんAI（藍の列・✓）］の2列。
     右の列は上から下まで1本の帯＝のれんAIだけを縦に目で追える。左の2社は小さな見出しつきで、何の値かが分かる */
  html[data-m] #compare .compare{display:none}
  html[data-m] .m-vs{position:relative;border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--m-line),var(--m-sh)}
  html[data-m] .m-vs::after{content:"";position:absolute;top:0;right:0;bottom:0;width:46%;z-index:0;pointer-events:none;border-radius:0 22px 22px 0;
    background:linear-gradient(180deg,rgba(42,86,166,.075),rgba(42,86,166,.11));box-shadow:inset 1px 0 0 rgba(42,86,166,.14)}
  html[data-m] .m-vs-hd,html[data-m] .m-vs-row{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,54fr) minmax(0,46fr)}
  html[data-m] .m-vs-hd span{display:flex;align-items:center;min-height:52px;padding:0 16px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--m-ink3)}
  html[data-m] .m-vs-hd span i{font-style:normal;margin:0 .35em;color:#b3bccd}
  html[data-m] .m-vs-hd .r{justify-content:center;border-radius:0 22px 0 0;color:#fff;font-size:13px;letter-spacing:.1em;background:linear-gradient(180deg,#2a4f9a,#13285c)}
  html[data-m] .m-vs-row{border-top:1px solid var(--m-line)}
  html[data-m] .m-vs-row .l{padding:16px 14px 16px 16px}
  html[data-m] .m-vs-row .k{margin:0;font-size:14.5px;font-weight:700;line-height:1.5;color:var(--m-ink)}
  html[data-m] .m-vs-row dl{margin:9px 0 0;display:grid;gap:5px}
  html[data-m] .m-vs-row dl>div{display:grid;grid-template-columns:4.6em minmax(0,1fr);column-gap:6px;align-items:baseline}
  html[data-m] .m-vs-row dt{font-size:10px;font-weight:700;letter-spacing:.04em;color:#97a1b5}
  html[data-m] .m-vs-row dd{margin:0;font-size:12px;line-height:1.6;color:var(--m-ink2)}
  html[data-m] .m-vs-row dl>.no dd{color:#a9b2c3}
  html[data-m] .m-vs-row .r{display:flex;align-items:center;padding:16px 10px 16px 12px;font-size:13.5px;font-weight:700;line-height:1.6;color:#13285c}
  html[data-m] .m-vs-row .r .ok{display:flex;align-items:flex-start;gap:7px}
  html[data-m] .m-vs-row .r .ok::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;background:#2a56a6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2 7 10.6l4.6-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
  html[data-m] #compare .only{margin-top:32px;font-size:17px;line-height:1.8}
  html[data-m] #compare .only .w{display:block;margin-top:6px;font-size:15px}
  html[data-m] #compare .only br.sp{display:none}

  /* 料金：見出し → 払い方の切り替え → 3つのプランの棚 → 安心の6項目 → 比べる一覧 → よくある質問 */
  html[data-m] #pricing{padding:var(--m-sec) 0}
  html[data-m] #pricing .pv3-sub{font-size:14.5px;line-height:1.9}
  html[data-m] #pricing .pv3-seg{margin-top:26px}
  html[data-m] #pricing .pv3-seg-in{max-width:340px;margin-inline:auto}
  html[data-m] #pricing .pv3-grid.m-shelf{display:block;margin-top:24px;max-width:none}
  html[data-m] #pricing .pv3-card{display:flex;flex-direction:column;gap:0;padding:24px 20px 22px}
  html[data-m] #pricing .pv3-card>*+*{margin-top:16px}
  html[data-m] #pricing .pv3-card .pv3-cta{margin-top:20px;width:100%}
  html[data-m] #pricing .pv3-card>.pv3-fine{margin-top:auto;padding-top:16px}
  html[data-m] #pricing .pv3-trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;justify-items:start;margin:8px 0 0;padding:0 4px}
  html[data-m] #pricing .pv3-trust li{justify-content:flex-start;margin:0;padding:0;background:none;box-shadow:none;font-size:12.5px;line-height:1.5;text-align:left}
  html[data-m] #pricing .pv3-table-block{margin-top:64px}
  html[data-m] #pricing .pv3-table-wrap,html[data-m] #pricing .pv3-swipe{display:none}
  html[data-m] .m-ptab{margin-top:18px;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--m-line),var(--m-sh)}
  html[data-m] .m-ptab-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:6px;background:#eef1f6}
  html[data-m] .m-ptab-seg button{min-height:40px;padding:0 3px;border:0;border-radius:12px;background:none;font:700 12px/1.3 var(--sans);letter-spacing:0;color:var(--m-ink3);cursor:pointer;white-space:nowrap}
  html[data-m] .m-ptab-seg button.on{color:#fff;background:linear-gradient(180deg,#3a5aa6,#13285c);box-shadow:0 6px 14px -8px rgba(14,32,84,.8)}
  html[data-m] .m-ptab-list{margin:0;padding:4px 16px 8px}
  html[data-m] .m-ptab-list>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:center;padding:13px 0;border-top:1px solid var(--m-line)}
  html[data-m] .m-ptab-list>div:first-child{border-top:0}
  html[data-m] .m-ptab-list dt{font-size:13px;font-weight:600;line-height:1.55;color:var(--m-ink2)}
  html[data-m] .m-ptab-list dd{margin:0;text-align:right;font-size:13.5px;font-weight:700;line-height:1.55;color:var(--m-ink)}
  html[data-m] .m-ptab-list dd small{display:block;font-size:11px;font-weight:500;color:var(--m-ink3)}
  html[data-m] #pricing .pv3-faq{margin-top:64px}
  html[data-m] #pricing .pv3-faq summary{padding:18px 16px;font-size:14.5px;line-height:1.6}

  /* はじめる前に（明朝の4段） */
  html[data-m] .closing{padding:84px 0 88px}
  html[data-m] .closing .crest{width:64px;height:64px}
  html[data-m] .closing p{font-size:17px;line-height:2.05;letter-spacing:.04em}
  html[data-m] .closing p+p{margin-top:22px}
  /* 締め */
  html[data-m] .cta{padding:88px 0 96px}
  html[data-m] .cta .mark{width:76px;height:76px}
  html[data-m] .cta .wordmark{font-size:40px}
  html[data-m] .cta h2{font-size:22px;line-height:1.55;margin-top:18px}
  html[data-m] .cta .cta-actions{flex-direction:column;align-items:stretch;gap:12px;max-width:350px;margin:28px auto 0}
  html[data-m] .cta .cta-actions .btn{width:100%;min-height:56px;font-size:15px}
  html[data-m] .cta .cta-hint{font-size:13px;line-height:1.85;margin-top:18px}
  /* フッター */
  html[data-m] .site-footer{padding:52px 0 110px}
  html[data-m] .site-footer .footer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}
  html[data-m] .site-footer .footer-brand{grid-column:1 / -1}
  html[data-m] .site-footer .footer-links a{font-size:13.5px}
}
@media (min-width:641px) and (max-width:1023px){
  html[data-m] .m-ptab{display:none}
  /* 比べる表（タブレット）：左の2社は横に並べる */
  html[data-m] .m-vs::after{width:38%}
  html[data-m] .m-vs-hd,html[data-m] .m-vs-row{grid-template-columns:minmax(0,62fr) minmax(0,38fr)}
  html[data-m] .m-vs-row .l{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);column-gap:18px;align-items:center;padding:18px 20px}
  html[data-m] .m-vs-row dl{margin:0;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}
  html[data-m] .m-vs-row dl>div{grid-template-columns:minmax(0,1fr);row-gap:2px}
  html[data-m] .m-vs-hd span{padding:0 20px}
  html[data-m] .m-vs-row .r{padding:18px 20px;font-size:14.5px}
  html[data-m] #pricing .pv3-table-wrap{display:block}
  html[data-m] #pricing .pv3-table{min-width:0;width:100%}
  html[data-m] #pricing .pv3-trust{grid-template-columns:repeat(3,minmax(0,1fr));max-width:680px;margin-inline:auto}
  html[data-m] .site-footer .footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr}
  html[data-m] .site-footer .footer-brand{grid-column:auto}
}

/* 幅の狭いスマホ（〜379px）：比べる表の左の2社は、見出し（制作会社・分析ツール）を値の上に置き、値の幅を広く取る */
@media (max-width:379px){
  html[data-m] .m-vs-hd .l{padding:0 12px;font-size:10.5px;letter-spacing:.02em;white-space:nowrap}
  html[data-m] .m-vs-row .l{padding:14px 10px 14px 12px}
  html[data-m] .m-vs-row dl{gap:7px}
  html[data-m] .m-vs-row dl>div{grid-template-columns:minmax(0,1fr);row-gap:1px}
  html[data-m] .m-vs-row .k{font-size:14px}
}

/* パソコン（1024px〜）：スマホ用に入れた文節の切れ目の印（<wbr class="m">）は効かせない＝パソコンの改行は今のまま。
   もとからある <wbr>（見出しの意図した改行位置）は消さない */
/* ★文節の切れ目の印を PC で消すのは、文節で折れる（word-break:auto-phrase が効く）ブラウザだけ（2026-10-17）。
   Safari は auto-phrase が無く、印を消すと keep-all の行に折れる所が無くなり「79,|200円」と数字の途中で折っていた */
@media (min-width:1024px){@supports (word-break:auto-phrase){html[data-m] wbr.m{display:none}}}

/* ══ 棚の見せ方：案B1「カードを送る」：次のカードの端（32px）を見せて送る。下に位置の点、タブレットは左右に矢印 ══ */
@media (max-width:1023px){
  html[data-m] .m-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:-10px;padding:0 var(--m-g)}
  html[data-m] .m-dots{display:flex;align-items:center;gap:7px}
  html[data-m] .m-dots button{width:7px;height:7px;padding:0;border:0;border-radius:99px;background:rgba(11,23,48,.18);cursor:pointer;transition:width .35s var(--m-ease),background .35s}
  html[data-m] .m-dots button.on{width:22px;background:#2a56a6}
  html[data-m] .m-dark .m-dots button{background:rgba(255,255,255,.24)}
  html[data-m] .m-dark .m-dots button.on{background:#9dbcff}
  html[data-m] .m-arr{display:none}
}
@media (min-width:641px) and (max-width:1023px){
  html[data-m] .m-nav{gap:18px;margin-top:-6px}
  html[data-m] .m-arr{display:inline-grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;cursor:pointer;color:#13285c;
    background:linear-gradient(180deg,#fff,#f2f5fa);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(11,23,48,.08),0 8px 18px -10px rgba(11,23,48,.4);transition:opacity .3s}
  html[data-m] .m-arr svg{width:16px;height:16px}
  html[data-m] .m-arr--p svg{transform:rotate(180deg)}
  html[data-m] .m-arr:disabled{opacity:.32;cursor:default}
  html[data-m] .m-dark .m-arr{color:#fff;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
}
/* ★980〜1023px はヘッダーに「無料で診断」「ホームページを作る」が並ぶので、下の帯は出さない（同じボタンが上下に2つ出ないように・2026-10-17） */
@media (min-width:980px) and (max-width:1023px){html[data-m] .m-bar{display:none}}

/* ══ スマホ（〜640px）：上を1段にまとめる（2026-10-17 持ち主「案B」）═════════════════════════════════
   ヘッダー 80px＋章の札 49px の2段で、読める所が画面の約7割しかなかった（下の帯も合わせて）。
   ヘッダーは 56px（noren-fv.css の --hdr）。札が出ている間は、ヘッダーの「のれんAI」の文字の場所に札を並べて1段にする（紋とメニューはそのまま・
   ページの一番上では今までどおり文字が出る）。札が入り切らない幅では、並びは指で横に送れ、青くなった札が見える所まで並びだけを自動で送る（js/noren-m.js）。
   下の帯も少し細く（ボタン 48→44px） */
@media (max-width:640px){
  html[data-m] .hg-inner{padding-top:calc(var(--hdr) + 4px)}
  html[data-m] .m-chips{top:0;left:calc(var(--m-g) + 38px);right:calc(var(--m-g) + 46px);height:var(--hdr);z-index:55;align-items:center;gap:4px;padding:0 8px;
    background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8px,#000 calc(100% - 8px),transparent);mask-image:linear-gradient(90deg,transparent,#000 8px,#000 calc(100% - 8px),transparent);
    transform:none;visibility:hidden;transition:opacity .25s,visibility 0s linear .25s}
  html[data-m].m-on .m-chips{visibility:visible;transition:opacity .25s,visibility 0s}
  html[data-m] .m-chips a{min-height:32px;padding:0 9px;font-size:12px;letter-spacing:.02em}
  html[data-m] .m-chips a::after{inset:-12px -2px}
  html[data-m] .site-header .wordmark{transition:opacity .25s}
  html[data-m].m-on .site-header .wordmark{opacity:0}
  html[data-m].m-on .site-header{border-bottom-color:var(--line)}
  html[data-m] main section[id]{scroll-margin-top:calc(var(--hdr) + 12px)}
  html[data-m] .m-bar{padding:5px;bottom:calc(8px + env(safe-area-inset-bottom))}
  html[data-m] .m-bar a{min-height:44px}
}