/* 機能の画面イメージ(HOME・B・C共通。2026-10-09 代表指示「各種機能のスクショが何のスクショかわかりにくい」)。
   管理画面の縮小スクショの代わりに、説明に必要な部分だけを HTML/CSS で組み直した図。
   ⚠️ 文字は本文13px以上・主な数字24px以上を守る。カードの幅(PC約535px、スマホ320幅で約264px)に合わせて
      @container で並びを変える。transform の縮小・固定の縦横比・切り抜きで字を潰さない(それが元の問題だった)。
   ⚠️ 色は白と緑だけ。影・グラデーション・ネオンは付けない(既存の枠・角丸・線に合わせる)。 */
.c-f-visual figcaption{font-size:13px;margin-top:6px}
.c-f-visual .fx{container-type:inline-size;border:1px solid #dfe7ea;border-radius:10px;background:#fff;overflow:hidden;text-align:left}
.fx-bar{display:flex;align-items:center;gap:8px;padding:7px 12px;background:#f6f9f8;border-bottom:1px solid #e3eaed}
.fx-dots{display:flex;gap:4px;flex:none}.fx-dots i{width:7px;height:7px;border-radius:50%;background:#d3dde1}
.fx-label{font-size:14px;font-weight:800;color:var(--ink);min-width:0}
.fx-sample{margin-left:auto;flex:none;font-size:13px;font-weight:700;color:#8a5a00;background:#fff3d6;border-radius:999px;padding:0 9px;line-height:1.7}
.fx-body{padding:14px;display:grid;gap:10px;font-size:14px;line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.fx-body p{margin:0}
.fx-body ul,.fx-body ol,.fx-body dl{margin:0;padding:0;list-style:none}
.fx-panel{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;min-width:0}
.fx-panel.is-accent{border-color:#bfe0cd;background:#f3faf6}
.fx-ttl{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13px;font-weight:800;color:#007545;margin-bottom:4px!important}
.fx-ttl-note{margin-left:auto;font-weight:700;color:var(--muted)}
.fx-ai{display:inline-grid;place-items:center;flex:none;min-width:28px;height:20px;padding:0 6px;border-radius:5px;background:var(--g);color:#fff;font-size:13px;font-weight:800;letter-spacing:.04em;line-height:1}
.fx-sub{font-size:13px;color:var(--muted);line-height:1.5}
.fx-strong{font-size:16px;font-weight:800;line-height:1.4}
.fx-lg{font-size:16px!important;font-weight:700}
.fx-num{font-size:26px;font-weight:800;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.fx-numline{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 6px}
.fx-unit{font-size:15px;font-weight:800}
.fx-up{font-size:13px;font-weight:700;color:#007545;background:#edf8f2;border-radius:999px;padding:0 8px}
.fx-btn{display:inline-flex;align-items:center;flex:none;background:var(--g);color:#fff;border-radius:8px;padding:6px 14px;font-size:14px;font-weight:800;line-height:1.4;white-space:nowrap}
.fx-tag{display:inline-flex;align-items:center;flex:none;font-size:13px;font-weight:700;color:#007545;background:#edf8f2;border:1px solid #cfe7da;border-radius:999px;padding:1px 9px;line-height:1.5}
.fx-tag.is-done:before{content:'✓';margin-right:4px}
.fx-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
.fx-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fx-stack{display:grid;gap:10px;align-content:start}
.fx-who{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;font-size:14px;margin-bottom:4px!important}
.fx-initial{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:#e3eaed;color:#4a5864;font-size:13px;font-weight:800}
.fx-initial.is-g{background:#fff;border:1px solid #dfe7ea;color:#007545}
.fx-stars{color:#f0a400;font-size:15px;letter-spacing:1px}.fx-stars .is-off{color:#d3dde1}
.fx-quote{font-size:15px;line-height:1.65}
/* 口コミ(お客様の文)は灰色、AIの文は緑。どちらが誰の文か色と見出しで分ける */
.fx-msg.is-customer{background:#f6f8f9;border-color:#e3e8eb}
.fx-msg.is-ai{background:#f3faf6;border-color:#bfe0cd;border-left:4px solid var(--g)}
.fx-flow{display:flex;align-items:center;gap:6px;justify-content:center;font-size:13px;font-weight:800;color:#007545;margin:-2px 0!important}
.fx-flow:before{content:'';width:9px;height:9px;border-right:2.5px solid var(--g);border-bottom:2.5px solid var(--g);transform:rotate(45deg);margin-top:-5px}
.fx-checks{display:grid;gap:3px}
.fx-checks li,.fx-facts span{position:relative;padding-left:20px;font-size:14px;font-weight:700}
.fx-checks li:before,.fx-facts span:before{content:'';position:absolute;left:3px;top:.42em;width:10px;height:6px;border-left:2.5px solid var(--g);border-bottom:2.5px solid var(--g);transform:rotate(-45deg)}

/* 03 MEO */
.fx-key{font-size:20px;font-weight:800;line-height:1.3}
.fx-chart{display:grid;grid-template-columns:auto 1fr;gap:6px;height:96px}
.fx-chart svg{width:100%;height:100%;display:block}
.fx-chart-y{display:flex;flex-direction:column;justify-content:space-between;font-size:13px;color:var(--muted);line-height:1}
.fx-axis{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);padding-left:38px}
.fx-cmp{display:grid;gap:6px}
.fx-cmp p{display:grid;grid-template-columns:minmax(0,1.3fr) 1fr 1fr;align-items:baseline;gap:6px;font-size:14px;padding:4px 8px;border-radius:8px}
.fx-cmp p.is-self{background:#edf8f2}
.fx-cmp em{font-style:normal;font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}

/* 05 アクセス解析 */
.fx-period{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:14px}
.fx-period span{font-size:13px;font-weight:800;color:#007545;background:#edf8f2;border-radius:6px;padding:1px 8px}
.fx-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fx-kpi{border:1px solid var(--line);border-radius:10px;padding:9px 10px;min-width:0;display:flex;flex-direction:column;gap:2px}
.fx-kpi .fx-ttl{color:var(--ink);margin:0!important}
.fx-src{align-self:flex-start;font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:0 6px;line-height:1.5}
.fx-bars{display:grid;gap:7px}
.fx-bars li{display:grid;grid-template-columns:7.2em 1fr auto;align-items:center;gap:8px;font-size:14px}
.fx-bars.is-compact li{grid-template-columns:5.2em 1fr 3em}
.fx-bar-name{font-weight:700;white-space:nowrap}
.fx-bar-track{height:12px;border-radius:6px;background:#eef3f1;overflow:hidden}
.fx-bar-track i{display:block;height:100%;border-radius:6px;background:var(--g)}
.fx-bar-val{font-weight:800;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.w-100{width:100%}.w-89{width:89%}.w-50{width:50%}.w-44{width:44%}.w-39{width:39%}.w-23{width:23%}.w-17{width:17%}
.fx-funnel{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.fx-funnel li{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 4px;border-radius:8px;background:#f6f9f8;font-size:13px;font-weight:700;text-align:center}
.fx-funnel b{font-size:18px;font-variant-numeric:tabular-nums}
.fx-funnel li.is-goal{background:var(--g);color:#fff}

/* 06 SEO */
.fx-terms{display:grid;gap:6px}
.fx-terms li{display:flex;flex-direction:column}
.fx-terms b{font-size:15px}
.fx-terms span{font-size:13px;color:var(--muted)}
.fx-prio{display:grid;gap:8px;counter-reset:prio}
.fx-prio li{position:relative;padding-left:32px;display:flex;flex-direction:column;counter-increment:prio}
.fx-prio li:before{content:counter(prio);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--g);color:#fff;font-size:13px;font-weight:800;display:grid;place-items:center}
.fx-prio b{font-size:16px;line-height:1.45}
.fx-prio span{font-size:13px;color:var(--muted)}

/* 07 商圏 */
.fx-modes{display:flex;flex-wrap:wrap;gap:6px}
.fx-modes span{font-size:13px;font-weight:700;color:#4a5864;border:1px solid var(--line);border-radius:999px;padding:1px 10px}
.fx-modes span.is-on{background:var(--g);border-color:var(--g);color:#fff}
.fx-trade-grid{grid-template-columns:1fr 1.15fr}
.fx-map{position:relative;border-radius:10px;overflow:hidden;min-height:170px;background:#f1f7f3}
.fx-map svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.fx-map-label{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);font-size:14px;font-weight:800;color:#007545;background:#fff;border:1px solid #bfe0cd;border-radius:999px;padding:1px 10px;white-space:nowrap}
.fx-map-note{position:absolute;left:8px;top:8px;font-size:13px;color:var(--muted);background:#fff;border-radius:5px;padding:0 6px}

/* 08 LP */
.fx-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fx-steps li{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;text-align:center;font-size:13px;font-weight:800;padding:6px;border-radius:8px;background:#f6f9f8;color:#4a5864}
.fx-steps li.is-done{background:#edf8f2;color:#007545}
.fx-steps li.is-now{background:var(--g);color:#fff}
.fx-lp-page{border:1px solid #dfe7ea;border-radius:10px;overflow:hidden}
.fx-lp-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:7px 12px;border-bottom:1px solid #eef2f3;font-size:14px}
.fx-lp-top span{font-size:13px;color:var(--muted)}
.fx-lp-hero{display:grid;grid-template-columns:1fr 1.2fr}
.fx-lp-art{display:block;width:100%;height:100%;min-height:150px}
.fx-lp-copy{padding:14px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;justify-content:center}
.fx-lp-eyebrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;font-weight:700;color:#007545}
.fx-lp-catch{font-size:19px;font-weight:800;line-height:1.4}

/* 09 広告 */
.fx-media{display:flex;flex-wrap:wrap;gap:6px}
.fx-media span{font-size:14px;font-weight:700;border:1px solid var(--line);border-radius:8px;padding:3px 10px;color:#4a5864}
.fx-media span.is-on{border-color:var(--g);background:#edf8f2;color:#007545}
.fx-media span.is-on:before{content:'✓';margin-right:5px}
.fx-dl{display:grid;gap:4px}
.fx-dl div{display:grid;grid-template-columns:6.5em 1fr;gap:8px;font-size:14px}
.fx-dl dt{color:var(--muted);font-weight:700}
.fx-dl dd{margin:0;font-weight:800}
.fx-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.fx-progress li{word-break:keep-all;overflow-wrap:normal;position:relative;text-align:center;font-size:13px;font-weight:700;color:var(--muted);padding-top:22px}
.fx-progress li:before{content:'';position:absolute;top:2px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;border:2px solid #cfdad6;background:#fff;z-index:1}
.fx-progress li:after{content:'';position:absolute;top:9px;left:-50%;width:100%;height:2px;background:#cfdad6}
.fx-progress li:first-child:after{display:none}
.fx-progress li.is-done,.fx-progress li.is-now{color:#007545}
.fx-progress li.is-done:before{background:var(--g);border-color:var(--g)}
.fx-progress li.is-done:after,.fx-progress li.is-now:after{background:var(--g)}
.fx-progress li.is-now{font-weight:800}
.fx-progress li.is-now:before{border-color:var(--g);border-width:4px}
.fx-fee{font-size:13px;font-weight:700;color:#8a5a00;background:#fff8e6;border-radius:8px;padding:6px 10px}

/* 10 顧客管理 */
.fx-hist{display:grid;gap:3px}
.fx-hist li{font-size:14px}
.fx-hist span{font-size:13px;color:var(--muted);margin-right:6px;font-variant-numeric:tabular-nums}

/* 11 AI診断 */
.fx-prio-chip{font-size:13px;font-weight:800;color:#fff;background:#c2410c;border-radius:999px;padding:0 9px;line-height:1.6}

/* 12 AI対策: 4つの段階を縦の線でつなぐ */
.fx-aeo{display:grid;gap:8px;counter-reset:aeo}
.fx-aeo>li{position:relative;border:1px solid var(--line);border-radius:10px;padding:9px 12px 9px 44px;counter-increment:aeo}
.fx-aeo>li.is-accent{border-color:#bfe0cd;background:#f3faf6}
.fx-aeo>li:before{content:counter(aeo);position:absolute;left:11px;top:10px;width:22px;height:22px;border-radius:50%;background:var(--g);color:#fff;font-size:13px;font-weight:800;display:grid;place-items:center}
.fx-aeo>li:not(:last-child):after{content:'';position:absolute;left:21px;top:34px;bottom:-9px;width:2px;background:#cfe7da}
.fx-facts{display:flex;flex-wrap:wrap;gap:4px 14px;margin:2px 0!important}
.fx-log{display:grid;gap:3px}
.fx-log span{font-size:14px}
.fx-log b{font-size:13px;color:var(--muted);margin-right:8px;font-variant-numeric:tabular-nums}

/* 狭いカード(スマホ)。数字と主文字の大きさは保ったまま、横並びを縦に積む */
@container (max-width:430px){
  .fx-body{padding:12px;gap:9px}
  .fx-kpis{grid-template-columns:1fr}
  .fx-kpi{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:8px}
  .fx-kpi .fx-ttl{flex:1 1 8em}
  .fx-kpi .fx-src{order:3;flex-basis:100%;max-width:max-content}
  .fx-trade-grid,.fx-lp-hero{grid-template-columns:1fr}
  .fx-lp-art{height:120px;min-height:0}
  .fx-funnel{grid-template-columns:1fr 1fr}
  .fx-cmp p{grid-template-columns:1fr 1fr}
  .fx-cmp p b{grid-column:1/-1}
}
@container (max-width:340px){
  .fx-cols{grid-template-columns:1fr}
  .fx-steps{grid-template-columns:1fr}
  .fx-bars li{grid-template-columns:6.4em 1fr auto;gap:6px}
  .fx-bars.is-compact li{grid-template-columns:5.2em 1fr 3em}
  .fx-dl div{grid-template-columns:5.5em 1fr}
  .fx-progress{gap:2px}
  .fx-progress li{font-size:13px;letter-spacing:-.06em}
  .fx-panel{padding:10px}
}