:root{
  --aio:#FFC629; --aio-2:#FFD966; --aio-field:#FFF6DC; --aio-deep:#9E6B00;
  --seo:#1552B8; --seo-2:#5B8AD9; --seo-field:#E9F0FC; --seo-deep:#0E3C8C;
  --ink:#0E1526; --mute:#5A6273; --line:#D9DEE8; --line-2:#EDF0F5;
  --paper:#FFFFFF; --base:#FAFBFD; --tint:#EDF1F7;
  --disp:"Zen Kaku Gothic New",-apple-system,sans-serif;
  --body:"Noto Sans JP",-apple-system,sans-serif;
  --data:"Archivo","Noto Sans JP",sans-serif;
  --pad:clamp(34px,5vw,64px);
  --maxw:1120px;
  --ease:cubic-bezier(.22,.75,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--base);
  line-height:1.85;font-size:15px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);position:relative;z-index:2}
section{position:relative;padding-block:clamp(64px,10vw,132px)}

/* ============ 共通 ============ */
.eyebrow{font-family:var(--data);font-weight:800;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:9px;margin-bottom:16px}
.eyebrow::before{content:"";width:24px;height:2px;background:currentColor;flex:none}
.eyebrow.mid{justify-content:center}
h2{font-family:var(--disp);font-weight:900;line-height:1.42;
  font-size:clamp(22px,3.6vw,37px);margin-bottom:16px}
.lede{color:var(--mute);max-width:62ch;font-size:14.5px}
.mid h2,.mid .lede,.mid .eyebrow{text-align:center}
.mid .eyebrow{justify-content:center}
.mid .lede{margin-inline:auto}
.card{background:var(--paper);border:1px solid var(--line);border-radius:4px;
  box-shadow:0 14px 40px -28px rgba(14,21,38,.6)}
.btn{display:inline-flex;align-items:center;gap:18px;font-weight:700;font-size:17px;
  text-decoration:none;padding:8px 8px 8px 38px;border-radius:99px;border:2px solid transparent;
  letter-spacing:.01em;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),filter .28s var(--ease)}
.btn .arw{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none;
  transition:transform .28s var(--ease)}
.btn .arw svg{width:19px;height:19px;display:block}
.btn-primary{color:#fff;
  background:linear-gradient(160deg,#141C31,#16306B) padding-box,
             linear-gradient(100deg,var(--aio) 0%,#7E86B0 48%,var(--seo) 100%) border-box;
  box-shadow:0 22px 46px -20px rgba(21,82,184,.75),0 10px 26px -14px rgba(255,198,41,.5)}
.btn-primary .arw{background:linear-gradient(140deg,var(--aio),#F0A800);color:#2A1D00}
.btn-primary:hover{transform:translateY(-3px);filter:saturate(1.12);
  box-shadow:0 30px 56px -20px rgba(21,82,184,.8),0 14px 30px -14px rgba(255,198,41,.6)}
.btn-primary:hover .arw{transform:translateX(4px)}
.btn.sm{font-size:12.5px;padding:5px 5px 5px 20px;gap:10px;border-width:1.5px}
.btn.sm .arw{width:28px;height:28px}
.btn.sm .arw svg{width:12px;height:12px}
.btn.sm.btn-primary{box-shadow:0 8px 18px -10px rgba(21,82,184,.6)}
.linklike{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
  color:var(--mute);text-decoration:none;border-bottom:1px solid var(--line);
  padding-bottom:4px;transition:.2s;background:none}
.linklike svg{width:13px;height:13px}
.linklike:hover{color:var(--ink);border-color:var(--ink)}
.btns{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.mid .btns{justify-content:center}
.note{font-size:11.5px;color:var(--mute);line-height:1.75;margin-top:16px}
.chart-title{font-family:var(--data);font-weight:800;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);margin-bottom:22px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.legend{display:flex;gap:14px;font-family:var(--body);font-weight:500;font-size:11.5px;
  letter-spacing:0;text-transform:none;color:var(--mute)}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:-1px}

/* ============ 縦分割フィールド ============ */
.split{background:linear-gradient(90deg,var(--aio-field) 0 50%,var(--seo-field) 50% 100%)}
.split::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;
  transform:translateX(-1px);opacity:.45;z-index:1;
  background:linear-gradient(180deg,var(--aio) 0 50%,var(--seo) 50% 100%)}
.ghost{position:absolute;top:50%;transform:translateY(-50%);z-index:0;pointer-events:none;
  user-select:none;white-space:nowrap;font-family:var(--data);font-weight:900;
  line-height:.8;letter-spacing:-.045em;font-size:clamp(84px,15vw,236px)}
.ghost span{display:block;font-family:var(--body);font-weight:700;font-size:13px;
  letter-spacing:.16em;line-height:1;margin-top:14px;opacity:.9}
.ghost-l{left:clamp(14px,3vw,56px);color:#E8AE00;opacity:.28}
.ghost-r{right:clamp(14px,3vw,56px);text-align:right;color:var(--seo);opacity:.13}

/* ============ ヘッダー ============ */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.93);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr{display:flex;align-items:center;justify-content:space-between;height:58px;
  max-width:var(--maxw);margin:0 auto;padding-inline:clamp(16px,4vw,64px)}
.mark{font-family:var(--disp);font-weight:900;font-size:16px;white-space:nowrap}
.mark i{font-style:normal;color:var(--aio-deep)}
.mark b{color:var(--seo)}
.mark s{text-decoration:none;color:var(--line);padding-inline:3px}


/* ============ ヒーロー ============ */
.hero{padding-block:clamp(56px,9vw,100px)}
.hero h1{font-family:var(--disp);font-weight:900;text-align:center;
  font-size:clamp(25px,5.6vw,58px);line-height:1.34;margin-bottom:22px}
.hero h1 .y{color:var(--aio-deep)}
.hero h1 .b{color:var(--seo)}
.hero-sub{text-align:center;max-width:42ch;margin:0 auto 30px;color:var(--mute);font-size:14.5px}
.hero .btns{justify-content:center}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:28px}
.chip{font-size:11.5px;font-weight:500;background:rgba(255,255,255,.82);
  border:1px solid var(--line);border-radius:99px;padding:6px 14px}
.bridge{margin-top:clamp(36px,6vw,60px);display:grid;grid-template-columns:1fr 1fr}
.bridge>div{padding:clamp(20px,3.2vw,32px)}
.bridge>div:first-child{border-right:1px solid var(--line)}
.tag{font-family:var(--data);font-weight:800;font-size:10px;letter-spacing:.2em;
  padding:4px 9px;border-radius:2px;display:inline-block;margin-bottom:12px}
.tag-a{background:var(--aio);color:#3A2800}
.tag-s{background:var(--seo);color:#fff}
.bridge h2,.bridge h3{font-family:var(--disp);font-weight:700;font-size:16px;margin-bottom:7px;line-height:1.5}
.bridge p{font-size:13px;color:var(--mute);line-height:1.8}

/* ============ ドーナツ ============ */
.donut{position:relative;width:100%;max-width:190px;margin-inline:auto}
.donut svg{display:block;width:100%;height:auto;transform:rotate(-90deg)}
.donut .track{fill:none;stroke:rgba(14,21,38,.09);stroke-width:13}
.donut .val{fill:none;stroke-width:13;stroke-linecap:butt;
  stroke-dasharray:339.29;stroke-dashoffset:339.29;
  transition:stroke-dashoffset 1.5s var(--ease)}
.in .donut .val{stroke-dashoffset:var(--off)}
.donut .cap{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.donut .cap b{font-family:var(--data);font-weight:900;font-size:clamp(24px,5vw,34px);
  line-height:1;letter-spacing:-.03em;display:block}
.donut .cap b small{font-size:.42em;font-weight:800;margin-left:2px}
.donut .cap em{font-style:normal;font-family:var(--data);font-weight:700;font-size:9.5px;
  letter-spacing:.16em;color:var(--mute);display:block;margin-top:7px}

/* ============ 01 実測 ============ */
.evid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,3.4vw,52px);margin-top:38px}
.evid .tag{margin-bottom:10px}
.col-head{font-family:var(--disp);font-weight:900;font-size:clamp(12px,1.6vw,15px);
  padding-bottom:10px;margin-bottom:20px;border-bottom:2px solid;line-height:1.5}
.col-a .col-head{color:var(--aio-deep);border-color:var(--aio)}
.col-b .col-head{color:var(--seo);border-color:var(--seo)}
.donut.z .track{stroke:rgba(14,21,38,.14);stroke-dasharray:7 7}
.donut.z .cap b{color:#8C95A6}
.col-a .donut .val{stroke:var(--aio)}
.col-b .donut .val{stroke:var(--seo)}
.dcell{padding:18px 0;border-bottom:1px solid rgba(14,21,38,.1)}
.dcell:last-child{border-bottom:0}
.col-a .dcell .cap b{color:var(--aio-deep)}
.col-b .dcell .cap b{color:var(--seo)}
.dcell p{font-size:clamp(11.5px,1.5vw,13.5px);color:var(--mute);line-height:1.8;
  margin-top:14px;text-align:center}
.dcell strong{color:var(--ink);font-weight:700}
.rankchart{padding:4px 0 0}
.rkhead{font-family:var(--data);font-weight:800;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);text-align:center;margin-bottom:16px}
.rk{margin-bottom:14px}
.rk .rkl{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:5px}
.rk .rkl span{font-size:11.5px;font-weight:700;color:var(--mute)}
.rk .rkl b{font-family:var(--data);font-weight:900;font-size:clamp(17px,2.6vw,24px);
  line-height:1;letter-spacing:-.02em;color:var(--seo)}
.rk .rkl b small{font-size:.5em;font-weight:800;margin-left:1px}
.rk .rkt{background:rgba(14,21,38,.08);border-radius:2px;height:15px;overflow:hidden}
.rk .rkf{display:block;height:100%;width:0;border-radius:2px;background:var(--seo);
  transition:width 1.3s var(--ease)}
.in .rk .rkf{width:var(--w)}
.rk.miss .rkl b{color:var(--seo-deep)}
.rk.miss .rkf{background:repeating-linear-gradient(45deg,var(--seo-2) 0 6px,#9DB8E4 6px 12px)}
.rkaxis{display:flex;justify-content:space-between;font-family:var(--data);font-weight:700;
  font-size:9.5px;color:var(--mute);border-top:1px solid rgba(14,21,38,.12);padding-top:6px}
.plain{text-align:center;padding:6px 0 2px}
.plain b{font-family:var(--data);font-weight:900;font-size:clamp(32px,7vw,52px);
  line-height:1;letter-spacing:-.03em;display:block}
.plain b small{font-size:.36em;font-weight:800;margin-left:2px}
.col-a .plain b{color:var(--aio-deep)}
.col-b .plain b{color:var(--seo)}

/* ============ 02 接合点：縦棒グラフ ============ */
.hinge{background:var(--base);overflow:hidden}
.fold{position:absolute;inset:0;pointer-events:none;z-index:0}
.fold span{position:absolute;top:0;bottom:0;width:52%}
.fold .fa{left:0;background:var(--aio-field);clip-path:polygon(0 0,100% 0,50% 100%,0 100%)}
.fold .fb{right:0;background:var(--seo-field);clip-path:polygon(0 0,100% 0,100% 100%,50% 100%)}
.colchart{margin:36px auto 0;max-width:720px;padding:clamp(24px,3.6vw,38px)}
.cols{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1.6vw,18px);
  align-items:end;height:262px;position:relative;padding-bottom:2px}
.gridlines{position:absolute;inset:0 0 2px;pointer-events:none}
.gridlines i{position:absolute;left:0;right:0;border-top:1px dashed var(--line-2)}
.bcol{display:flex;flex-direction:column;justify-content:flex-end;height:100%;position:relative}
.bcol .v{position:absolute;left:0;right:0;bottom:calc(var(--top) + 10px);
  font-family:var(--data);font-weight:900;font-size:clamp(13px,2vw,17px);
  text-align:center;color:var(--ink);line-height:1;
  opacity:0;transition:opacity .5s var(--ease) .7s}
.in .bcol .v{opacity:1}
.bcol .b{width:100%;border-radius:3px 3px 0 0;height:0;
  background:linear-gradient(180deg,var(--aio) 0%,var(--seo) 100%);
  transition:height 1.3s var(--ease)}
.in .bcol .b{height:var(--h)}
.bcol.zero .b{background:repeating-linear-gradient(45deg,#DDE1E9 0 5px,#EBEEF3 5px 10px)}
.bcol.zero .v{color:#A8AEBB}
.bcol .rng{position:absolute;left:50%;transform:translateX(-50%);width:2px;
  background:var(--ink);bottom:var(--lo);height:calc(var(--hi) - var(--lo));
  box-shadow:0 0 0 2px rgba(255,255,255,.85);border-radius:2px;
  opacity:0;transition:opacity .5s var(--ease) 1.1s}
.bcol .rng::before,.bcol .rng::after{content:"";position:absolute;left:-5px;width:12px;height:2px;
  background:var(--ink);border-radius:2px;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.bcol .rng::before{top:0}
.bcol .rng::after{bottom:0}
.in .bcol .rng{opacity:1}
.refbadge{display:inline-flex;align-items:center;gap:7px;font-family:var(--data);font-weight:800;
  font-size:10px;letter-spacing:.14em;color:var(--mute);background:rgba(255,255,255,.85);
  border:1px solid var(--line);border-radius:99px;padding:5px 12px;margin-bottom:14px}
.mid .refbadge{display:flex;width:fit-content;margin-inline:auto}
.refbadge i{width:6px;height:6px;border-radius:50%;background:var(--aio);display:block;flex:none}
.basis{font-size:11.5px;color:var(--mute);line-height:1.75;margin-top:14px;
  padding-top:12px;border-top:1px dashed var(--line)}
.basis b{font-family:var(--data);color:var(--ink);font-weight:800}
.xlab{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1.6vw,18px);
  margin-top:12px;padding-top:12px;border-top:2px solid var(--ink)}
.xlab span{font-size:clamp(10px,1.5vw,12.5px);text-align:center;font-weight:700;color:var(--mute)}
.xlab span.hot{color:var(--ink)}
.gateline{position:relative;margin-top:18px;padding:14px 16px;border-radius:3px;
  background:linear-gradient(90deg,rgba(255,198,41,.22),rgba(21,82,184,.13));
  font-size:12.5px;font-weight:700;display:flex;gap:10px;align-items:center}
.gateline b{font-family:var(--data);font-size:10px;letter-spacing:.14em;
  background:var(--ink);color:#fff;padding:3px 8px;border-radius:2px;flex:none}
.gate-note{display:flex;gap:11px;align-items:flex-start;max-width:720px;margin:18px auto 0;
  font-size:12.5px;color:var(--mute);line-height:1.85}
.gate-note b{font-family:var(--data);font-size:10px;letter-spacing:.14em;flex:none;
  background:var(--ink);color:#fff;padding:3px 8px;border-radius:2px;margin-top:5px}
.gate-note strong{color:var(--ink)}
.weave{height:7px;background:repeating-linear-gradient(90deg,var(--aio) 0 24px,var(--seo) 24px 48px)}

/* ============ 横棒グラフ ============ */
.hbars{margin-top:30px}
.hb{display:grid;grid-template-columns:clamp(96px,17vw,150px) 1fr 52px;gap:12px;
  align-items:center;padding:9px 0}
.hb .lb{font-size:12.5px;font-weight:500;text-align:right;color:var(--mute);line-height:1.45}
.hb.top .lb{color:var(--ink);font-weight:700}
.hb .tr{background:var(--base);border-radius:2px;height:22px;overflow:hidden}
.hb .fl{display:block;height:100%;width:0;border-radius:2px;background:var(--seo-2);
  transition:width 1.2s var(--ease)}
.in .hb .fl{width:var(--w)}
.hb.top .fl{background:linear-gradient(90deg,var(--aio),var(--aio-deep))}
.hb .vv{font-family:var(--data);font-weight:800;font-size:13px;color:var(--ink)}
.hb.top .vv{color:var(--aio-deep)}
.avgline{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);
  font-size:12px;color:var(--mute)}
.avgline b{font-family:var(--data);color:var(--ink)}

/* ============ グループ縦棒 ============ */
.gchart{padding:clamp(22px,3.4vw,34px);margin-top:20px}
.gcols{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(6px,1.4vw,16px);
  align-items:end;height:190px}
.gcol{display:flex;gap:4px;align-items:flex-end;height:100%;justify-content:center}
.gcol i{width:44%;max-width:26px;border-radius:2px 2px 0 0;height:0;
  transition:height 1.2s var(--ease)}
.in .gcol i{height:var(--h)}
.gcol i.a{background:var(--aio)}
.gcol i.b{background:var(--seo)}
.gxlab{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(6px,1.4vw,16px);
  margin-top:10px;padding-top:10px;border-top:2px solid var(--ink)}
.gxlab span{font-size:11.5px;text-align:center;font-weight:700;color:var(--mute)}
.gxlab span.hot{color:var(--aio-deep)}

/* ============ 4段階スコア（円グラフ） ============ */
.score{margin-top:36px;padding:clamp(24px,3.6vw,38px);
  display:grid;grid-template-columns:230px 1fr;gap:clamp(24px,4vw,46px);align-items:center}
.pie{position:relative;max-width:200px;margin-inline:auto}
.pie svg{width:100%;height:auto;display:block;transform:rotate(-90deg);overflow:visible}
.pie circle{fill:none;stroke-width:24;stroke-dashoffset:0;
  stroke-dasharray:0 314.16;transition:stroke-dasharray 1.3s var(--ease)}
.in .pie circle{stroke-dasharray:var(--da)}
.pie .cap{position:absolute;inset:0;display:grid;place-content:center;text-align:center;
  padding:0 30%;pointer-events:none}
.pie .cap b{font-family:var(--data);font-weight:900;font-size:26px;line-height:1;display:block;color:var(--ink)}
.pie .cap em{font-style:normal;font-size:9.5px;color:var(--mute);display:block;margin-top:5px;line-height:1.45}
.score h3{font-family:var(--disp);font-weight:900;font-size:18px;margin-bottom:6px}
.score .sub{font-size:13px;color:var(--mute);margin-bottom:18px}
.rung{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:13px;
  padding:11px 0;border-top:1px solid var(--line)}
.rung .lv{font-family:var(--data);font-weight:800;font-size:12.5px;text-align:center;
  padding:4px 0;border-radius:2px;background:var(--base);color:var(--mute)}
.rung .txt b{font-weight:700;display:block;font-size:13.5px;margin-bottom:1px}
.rung .txt span{color:var(--mute);font-size:11.5px;line-height:1.65}
.rung .pct{font-family:var(--data);font-weight:800;font-size:13px;color:var(--mute)}
.rung.l3 .lv{background:var(--aio);color:#3A2800}
.rung.l2 .lv{background:var(--aio-2);color:#3A2800}
.rung.l1 .lv{background:var(--seo-2);color:#fff}

/* ============ エリアチャート ============ */
.dash{margin-top:36px;padding:clamp(20px,3vw,30px)}
.dashhead{display:flex;justify-content:space-between;align-items:center;
  padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:20px;gap:10px}
.dashhead b{font-family:var(--disp);font-size:14.5px}
.live{font-family:var(--data);font-size:10px;font-weight:800;letter-spacing:.14em;
  background:var(--seo);color:#fff;padding:3px 9px;border-radius:99px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.kpi{padding:15px;background:var(--base);border-radius:3px}
.kpi b{font-family:var(--data);font-weight:900;font-size:clamp(19px,3vw,26px);display:block;
  line-height:1.2;color:var(--seo)}
.kpi:nth-child(odd) b{color:var(--aio-deep)}
.kpi span{font-size:11.5px;color:var(--mute);display:block;margin-top:5px;line-height:1.5}
.area{width:100%;height:auto;display:block}
.area .ln{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 1.8s var(--ease)}
.in .area .ln{stroke-dashoffset:0}
.area .fillA{opacity:0;transition:opacity 1s var(--ease) .6s}
.in .area .fillA{opacity:1}
.area .ax{stroke:var(--line-2);stroke-width:1}
.area text{font-family:var(--data);font-size:10px;fill:var(--mute);font-weight:600}

/* ============ その他セクション ============ */
.walls{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:36px}
.walls>div{background:var(--paper);padding:clamp(22px,3vw,30px)}
.walls h3{font-family:var(--disp);font-weight:900;font-size:17px;margin:12px 0 9px}
.walls p{font-size:13px;color:var(--mute)}
.walls .voice{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);
  font-size:12.5px;color:var(--ink);font-weight:500}
.wnum{font-family:var(--data);font-weight:800;font-size:11px;letter-spacing:.18em;color:var(--mute)}

.layers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px}
.layer{padding:clamp(22px,3vw,30px);border-top:4px solid}
.layer:nth-child(1){border-color:var(--aio)}
.layer:nth-child(2){border-color:#8AA0C9}
.layer:nth-child(3){border-color:var(--seo)}
.layer .lb{font-family:var(--data);font-weight:800;font-size:10px;letter-spacing:.2em;
  color:var(--mute);display:block;margin-bottom:12px}
.layer h3{font-family:var(--disp);font-weight:900;font-size:18px;margin-bottom:9px;line-height:1.5}
.layer p{font-size:13px;color:var(--mute)}

.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:36px}
.feats>div{background:var(--paper);padding:clamp(20px,2.6vw,26px)}
.feats .fn{font-family:var(--data);font-weight:800;font-size:11px;color:var(--mute);letter-spacing:.14em}
.feats h3{font-family:var(--disp);font-weight:700;font-size:15px;margin:10px 0 8px;line-height:1.55}
.feats p{font-size:12.5px;color:var(--mute);line-height:1.8}

.kw{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,52px);align-items:start;margin-top:36px}
.kwlist{list-style:none}
.kwlist li{padding:13px 0;border-bottom:1px solid var(--line);font-size:13.5px;
  display:grid;grid-template-columns:20px 1fr;gap:11px}
.kwlist li::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--aio);margin-top:8px}
.kwlist li:nth-child(even)::before{background:var(--seo)}
.kwlist strong{display:block;font-weight:700;margin-bottom:2px}
.kwlist span span{color:var(--mute);font-size:12.5px}
.kwpanel{padding:clamp(20px,3vw,28px)}
.kwpanel .ph{display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:4px;gap:8px}
.kwpanel .ph b{font-family:var(--disp);font-size:13.5px}
.kwpanel .ph span{font-family:var(--data);font-size:10.5px;color:var(--mute);letter-spacing:.08em;white-space:nowrap}
.kwrow{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.kwrow i{font-style:normal;font-family:var(--data);font-weight:700;font-size:11px;color:var(--mute);white-space:nowrap}
.journey{display:flex;gap:5px;margin-top:14px}
.journey span{flex:1;text-align:center;font-size:11px;font-weight:700;padding:7px 0;border-radius:2px}
.journey span:nth-child(1){background:var(--aio-field);color:var(--aio-deep)}
.journey span:nth-child(2){background:#FFF0C4;color:var(--aio-deep)}
.journey span:nth-child(3){background:#DDE7F8;color:var(--seo-deep)}
.journey span:nth-child(4){background:var(--seo);color:#fff}

.versus{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:36px}
.vs{padding:clamp(22px,3vw,30px)}
.vs.bad{background:#F3F4F7;border:1px solid var(--line)}
.vs.good{background:var(--paper);border:2px solid var(--seo)}
.vs .vh{font-family:var(--data);font-weight:800;font-size:10px;letter-spacing:.18em;
  color:var(--mute);display:block;margin-bottom:10px}
.vs.good .vh{color:var(--seo)}
.vs h3{font-family:var(--disp);font-weight:900;font-size:17px;margin-bottom:14px;line-height:1.5}
.vs ul{list-style:none}
.vs li{font-size:13px;padding:8px 0 8px 20px;position:relative;color:var(--mute);line-height:1.75}
.vs li::before{position:absolute;left:0;top:8px;font-weight:700}
.vs.bad li::before{content:"×";color:#A8AEBB}
.vs.good li::before{content:"→";color:var(--seo)}
.vs.good li{color:var(--ink)}
.loop{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}
.loop div{flex:1;min-width:112px;padding:13px;background:var(--paper);border:1px solid var(--line);
  border-radius:3px;font-size:11.5px;text-align:center;color:var(--mute)}
.loop div b{display:block;font-family:var(--disp);font-size:13px;margin-bottom:4px;color:var(--ink)}

.cmp{margin-top:36px;overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}
.cmp table{min-width:660px;font-size:12.5px}
.cmp th,.cmp td{padding:14px;border-bottom:1px solid var(--line);text-align:center}
.cmp thead th{font-weight:700;color:var(--ink);vertical-align:bottom}
.cmp thead th:last-child{background:linear-gradient(180deg,rgba(255,198,41,.24),rgba(21,82,184,.14));
  border-radius:3px 3px 0 0}
.cmp tbody td{font-weight:500;color:var(--mute)}
.cmp tbody td:first-child,.cmp thead th:first-child{text-align:left}
.cmp tbody td:first-child{font-weight:700;color:var(--ink);font-size:13px}
.cmp tbody td:last-child{background:rgba(21,82,184,.045);color:var(--ink);font-weight:700}
.cmp tbody tr:last-child td{border-bottom:0}

.flow{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:30px}
.stepbox{background:var(--paper);border:1px solid var(--line);border-radius:3px;
  padding:14px 10px;text-align:center}
.stepbox b{font-family:var(--data);font-weight:800;font-size:10px;color:var(--mute);
  display:block;margin-bottom:6px;letter-spacing:.08em}
.stepbox span{font-size:12px;font-weight:500;line-height:1.5;display:block}
.stepbox.on{background:var(--ink);border-color:var(--ink)}
.stepbox.on b{color:var(--aio)}
.stepbox.on span{color:#fff}
.input{display:inline-flex;align-items:center;gap:10px;background:var(--paper);
  border:1px solid var(--line);border-radius:3px;padding:11px 16px;font-size:13px}
.input b{font-family:var(--data);font-size:10px;letter-spacing:.16em;color:var(--mute)}

.rec{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}
.rec>div{padding:clamp(18px,2.6vw,26px);background:var(--paper);border:1px solid var(--line);border-radius:3px}
.rec b{font-family:var(--data);font-weight:900;font-size:clamp(24px,4vw,38px);display:block;
  line-height:1.1;margin-bottom:8px}
.rec>div:nth-child(odd) b{color:var(--aio-deep)}
.rec>div:nth-child(even) b{color:var(--seo)}
.rec .rl{font-family:var(--data);font-size:9.5px;letter-spacing:.18em;color:var(--mute);
  display:block;margin-bottom:10px}
.rec p{font-size:12px;color:var(--mute);line-height:1.75}
.verts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:14px}
.verts>div{background:var(--paper);padding:20px}
.verts h4{font-family:var(--disp);font-weight:700;font-size:13.5px;margin-bottom:7px}
.verts p{font-size:12px;color:var(--mute);line-height:1.75}

.onb{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:36px}
.onb>div{padding:20px 16px;background:var(--paper);border:1px solid var(--line);border-radius:3px;
  border-top:3px solid var(--seo)}
.onb b{font-family:var(--data);font-weight:800;font-size:11px;color:var(--mute);
  display:block;margin-bottom:10px;letter-spacing:.14em}
.onb h3{font-family:var(--disp);font-weight:700;font-size:14.5px;margin-bottom:7px}
.onb p{font-size:12px;color:var(--mute);line-height:1.75}

.faq{margin-top:30px;max-width:820px;margin-inline:auto;text-align:left}
details{background:var(--paper);border:1px solid var(--line);border-radius:3px;margin-bottom:9px}
summary{padding:17px 20px;font-weight:700;font-size:14px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--data);font-weight:700;font-size:19px;color:var(--seo);flex:none}
details[open] summary::after{content:"–"}
details p{padding:0 20px 19px;font-size:13.5px;color:var(--mute)}

.cta{background:var(--ink);color:#fff;text-align:center}
.cta h2{color:#fff}
.cta .lede{color:#A9B2C4;margin:0 auto 28px}
.cta .btn-primary{color:var(--ink);
  background:linear-gradient(160deg,#FFFFFF,#EDF2FA) padding-box,
             linear-gradient(100deg,var(--aio) 0%,#9AA6C8 48%,var(--seo) 100%) border-box;
  box-shadow:0 22px 50px -20px rgba(255,198,41,.55),0 10px 28px -14px rgba(21,82,184,.7)}
.cta .btn-primary .arw{background:linear-gradient(140deg,var(--seo),#0E3C8C);color:#fff}
.cta .linklike{color:#A9B2C4;border-color:rgba(255,255,255,.3)}
.cta .linklike:hover{color:#fff;border-color:#fff}
footer{padding:24px 0;font-size:11.5px;color:var(--mute);text-align:center}
footer a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
footer a:hover{color:var(--ink)}


/* ==== 面のリズム ==== */
.tinted{background:var(--tint)}
.tinted .card,.tinted .walls>div,.tinted .feats>div,.tinted .stepbox:not(.on),.tinted .onb>div{background:var(--paper)}

/* ==== 3つの壁：巨大な連番＋アクセント ==== */
.walls{position:relative}
.walls>div{position:relative;overflow:hidden;padding-top:clamp(26px,3.4vw,34px)}
.walls>div::before{content:"";position:absolute;top:0;left:0;right:0;height:4px}
.walls>div:nth-child(1)::before{background:var(--aio)}
.walls>div:nth-child(2)::before{background:linear-gradient(90deg,var(--aio),var(--seo))}
.walls>div:nth-child(3)::before{background:var(--seo)}
.walls .bignum{position:absolute;right:10px;bottom:-16px;font-family:var(--data);font-weight:900;
  font-size:110px;line-height:1;color:var(--ink);opacity:.055;pointer-events:none}
.walls .voice{background:var(--base);border:0;border-left:3px solid var(--line);
  padding:12px 14px;border-radius:0 3px 3px 0;margin-top:16px}

/* ==== 特徴アイコン ==== */
.ficon{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;margin-bottom:14px}
.ficon svg{width:19px;height:19px;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.feats>div:nth-child(-n+4) .ficon{background:#FFF3D0;color:var(--aio-deep)}
.feats>div:nth-child(n+5) .ficon{background:var(--seo-field);color:var(--seo)}

/* ==== 比較表：記号 ==== */
.mk{display:block;font-family:var(--body);font-weight:700;font-size:26px;line-height:1;
  letter-spacing:0;background:none;box-shadow:none;border-radius:0;width:auto;height:auto}
.mk-o{color:var(--seo)}
.mk-t{color:#9A6800}
.mk-x{color:#AEB5C2}
.mk-best{color:#E09A00}
.cmp tbody td small{display:block;font-size:11.5px;margin-top:9px;color:#4A5265;font-weight:500}
.cmp tbody td:last-child small{color:var(--ink);font-weight:700}

/* ==== ワークフロー：レール ==== */
.flowwrap{position:relative;margin-top:30px}
.stepbox{position:relative;z-index:1}
.stepbox .dot{width:12px;height:12px;border-radius:50%;background:var(--paper);
  border:2.5px solid var(--line);margin:0 auto 10px}
.stepbox.on .dot{background:var(--aio);border-color:var(--ink)}
.stepbox.key .dot{background:var(--seo);border-color:var(--seo)}

/* ==== ワークフロー種別カード ==== */
.wf{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px}
.wfcard{background:var(--paper);border:1px solid var(--line);border-radius:4px;
  padding:clamp(18px,2.4vw,24px);position:relative}
.wfcard.hot{border-color:var(--aio);box-shadow:0 0 0 3px rgba(255,198,41,.18)}
.wfcard .tag{margin-bottom:14px}
.wfcard b{font-family:var(--data);font-weight:900;font-size:clamp(32px,4.4vw,46px);
  line-height:1;letter-spacing:-.03em;color:var(--ink)}
.wfcard .u{font-size:11.5px;font-weight:700;color:var(--mute);margin-left:5px}
.wfcard p{font-size:12.5px;color:var(--mute);line-height:1.8;margin-top:12px}
.flow .stepbox b{font-size:11px}

/* ==== FV スペックバー ==== */
.specbar{margin-top:clamp(28px,4vw,40px);display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:4px;
  box-shadow:0 14px 38px -28px rgba(14,21,38,.6);overflow:hidden}
.specbar>div{padding:18px 16px;text-align:center;border-left:1px solid var(--line)}
.specbar>div:first-child{border-left:0}
.specbar i{width:7px;height:7px;border-radius:2px;display:block;margin:0 auto 10px}
.specbar .d-a{background:var(--aio)}
.specbar .d-b{background:var(--seo)}
.specbar b{display:block;font-family:var(--disp);font-weight:900;font-size:14px;line-height:1.5;margin-bottom:5px}
.specbar span{display:block;font-size:11.5px;color:var(--mute);line-height:1.6}
@media(max-width:900px){
  .specbar{grid-template-columns:repeat(2,1fr)}
  .specbar>div:nth-child(3){border-left:0}
  .specbar>div:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:600px){
  .specbar{grid-template-columns:1fr}
  .specbar>div{border-left:0;border-top:1px solid var(--line);padding:14px 12px}
  .specbar>div:first-child{border-top:0}
  .specbar b{font-size:13px}
}

/* ==== note 引用獲得セクション ==== */
.qb{margin-top:34px;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,3vw,40px);align-items:start}
.qbsteps{display:grid;gap:10px}
.qbstep{background:var(--paper);border:1px solid var(--line);border-radius:4px;
  padding:18px 20px;display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start}
.qbstep .n{font-family:var(--data);font-weight:800;font-size:11px;letter-spacing:.06em;
  background:var(--aio);color:#2A1D00;border-radius:3px;padding:5px 0;text-align:center}
.qbstep.stop .n{background:var(--ink);color:var(--aio)}
.qbstep h4{font-family:var(--disp);font-weight:900;font-size:15px;margin-bottom:5px}
.qbstep p{font-size:12.5px;color:var(--mute);line-height:1.8}
.qbspec{background:var(--ink);border-radius:4px;padding:clamp(22px,3vw,30px);color:#fff;position:sticky;top:80px}
.qbspec .lb{font-family:var(--data);font-weight:800;font-size:10px;letter-spacing:.2em;
  color:var(--aio);display:block;margin-bottom:14px}
.qbspec h4{font-family:var(--disp);font-weight:900;font-size:17px;margin-bottom:16px;line-height:1.5}
.qbspec ul{list-style:none}
.qbspec li{font-size:13px;color:#C7CEDC;line-height:1.75;padding:9px 0 9px 22px;position:relative;
  border-top:1px solid rgba(255,255,255,.11)}
.qbspec li:first-of-type{border-top:0}
.qbspec li::before{content:"";position:absolute;left:2px;top:16px;width:8px;height:8px;
  border-radius:2px;background:var(--aio)}
.qbspec li b{color:#fff;font-weight:700}
.qbout{margin-top:18px;padding-top:16px;border-top:1px dashed rgba(255,255,255,.22);
  font-size:12px;color:#9BA6BB;line-height:1.75}
@media(max-width:900px){.qb{grid-template-columns:1fr}.qbspec{position:static}}

/* ==== FV スペックバー ==== */
.specbar{margin-top:clamp(28px,4vw,40px);display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:4px;
  box-shadow:0 14px 38px -28px rgba(14,21,38,.6);overflow:hidden}
.specbar>div{padding:18px 16px;text-align:center;border-left:1px solid var(--line)}
.specbar>div:first-child{border-left:0}
.specbar i{width:7px;height:7px;border-radius:2px;display:block;margin:0 auto 10px}
.specbar .d-a{background:var(--aio)}
.specbar .d-b{background:var(--seo)}
.specbar b{display:block;font-family:var(--disp);font-weight:900;font-size:14px;line-height:1.5;margin-bottom:5px}
.specbar span{display:block;font-size:11.5px;color:var(--mute);line-height:1.6}
@media(max-width:900px){
  .specbar{grid-template-columns:repeat(2,1fr)}
  .specbar>div:nth-child(3){border-left:0}
  .specbar>div:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:600px){
  .specbar{grid-template-columns:1fr}
  .specbar>div{border-left:0;border-top:1px solid var(--line);padding:14px 12px}
  .specbar>div:first-child{border-top:0}
  .specbar b{font-size:13px}
}

/* ==== note 引用獲得セクション ==== */
.qb{margin-top:34px;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,3vw,40px);align-items:start}
.qbsteps{display:grid;gap:10px}
.qbstep{background:var(--paper);border:1px solid var(--line);border-radius:4px;
  padding:18px 20px;display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start}
.qbstep .n{font-family:var(--data);font-weight:800;font-size:11px;letter-spacing:.06em;
  background:var(--aio);color:#2A1D00;border-radius:3px;padding:5px 0;text-align:center}
.qbstep.stop .n{background:var(--ink);color:var(--aio)}
.qbstep h4{font-family:var(--disp);font-weight:900;font-size:15px;margin-bottom:5px;line-height:1.5}
.qbstep p{font-size:12.5px;color:var(--mute);line-height:1.8}
.qbstep p b{color:var(--ink);font-weight:700}
.qbspec{background:var(--ink);border-radius:4px;padding:clamp(22px,3vw,30px);color:#fff}
.qbspec .lb{font-family:var(--data);font-weight:800;font-size:10px;letter-spacing:.2em;
  color:var(--aio);display:block;margin-bottom:14px}
.qbspec h4{font-family:var(--disp);font-weight:900;font-size:17px;margin-bottom:16px;line-height:1.55}
.qbspec ul{list-style:none}
.qbspec li{font-size:13px;color:#C7CEDC;line-height:1.75;padding:10px 0 10px 22px;position:relative;
  border-top:1px solid rgba(255,255,255,.11)}
.qbspec li:first-of-type{border-top:0}
.qbspec li::before{content:"";position:absolute;left:2px;top:17px;width:8px;height:8px;
  border-radius:2px;background:var(--aio)}
.qbspec li b{color:#fff;font-weight:700}
.qbout{margin-top:18px;padding-top:16px;border-top:1px dashed rgba(255,255,255,.22);
  font-size:12px;color:#9BA6BB;line-height:1.75}
@media(max-width:900px){.qb{grid-template-columns:1fr}}

/* ==== 導入ステップ：連番レール ==== */
.onb{counter-reset:st}
.onb>div{position:relative;padding-top:30px;border-top:0}
.onb>div::before{counter-increment:st;content:counter(st,decimal-leading-zero);
  position:absolute;top:-15px;left:16px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--data);font-weight:800;font-size:11px;
  background:var(--ink);color:#fff}
.onb>div:last-child::before{background:linear-gradient(140deg,var(--aio),#F0A800);color:#2A1D00}
.onbwrap{position:relative;margin-top:44px}
.onbwrap::before{content:"";position:absolute;left:30px;right:30px;top:0;height:2px;
  background:linear-gradient(90deg,var(--ink),var(--aio));opacity:.22}

/* ============ 出現 ============ */
.rv{opacity:0;transform:translateY(15px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .donut .val,.bcol .b,.bcol .v,.hb .fl,.gcol i,.pie circle,.area .ln,.area .fillA{transition:none}
  html{scroll-behavior:auto}
}
:focus-visible{outline:3px solid var(--seo);outline-offset:3px}

/* ============ タブレット ============ */
@media(max-width:900px){
  .walls,.layers{grid-template-columns:1fr}
  .feats{grid-template-columns:repeat(2,1fr)}
  .kw,.versus{grid-template-columns:1fr}
  .flow{grid-template-columns:repeat(3,1fr)}
  .wf{grid-template-columns:repeat(2,1fr)}
  .rec,.verts,.onb,.kpis{grid-template-columns:repeat(2,1fr)}
  .score{grid-template-columns:1fr;gap:26px}
  .pie{max-width:210px;margin-inline:auto}
}

/* ============ SP：縦分割は維持 ============ */
@media(max-width:600px){
  .hero h1{font-size:22.5px;line-height:1.45}
  .hdr{padding-inline:14px}
  .mark{font-size:14px}
  .btn.sm{font-size:11.5px;padding:4px 4px 4px 14px;gap:7px}
  .btn.sm .arw{width:24px;height:24px}
  .bcol .v{white-space:nowrap;font-size:11px;letter-spacing:-.02em}
  .cols,.xlab{gap:5px}
  .xlab span{font-size:9px;letter-spacing:-.03em;white-space:nowrap}
  .chart-title{font-size:9.5px}
  .ghost{font-size:15.5vw;letter-spacing:-.03em}
  .ghost span{display:none}
  .ghost-l{left:10px;opacity:.16}
  .ghost-r{right:10px;opacity:.085}
  .bridge{grid-template-columns:1fr;background:none;border:0;box-shadow:none}
  .bridge>div{background:var(--paper);border:1px solid var(--line);border-radius:4px;
    box-shadow:0 10px 26px -22px rgba(14,21,38,.5)}
  .bridge>div:first-child{margin-right:26px;border-left:4px solid var(--aio);margin-bottom:12px}
  .bridge>div:last-child{margin-left:26px;border-right:4px solid var(--seo);text-align:right}
  .bridge>div:last-child .tag{margin-left:auto}
  .evid{grid-template-columns:1fr 1fr;gap:12px}
  .donut{max-width:132px}
  .donut .cap b{font-size:21px}
  .donut .cap em{font-size:8.5px;letter-spacing:.1em}
  .dcell p{font-size:11px;line-height:1.7;margin-top:10px}
  .col-head{font-size:11.5px}
  .cols{height:200px}
  .hb{grid-template-columns:clamp(80px,26vw,110px) 1fr 44px;gap:9px}
  .hb .lb{font-size:11px}
  .gcols{height:150px}
  .gxlab span{font-size:10px}
  .feats,.rec,.verts,.onb,.kpis{grid-template-columns:1fr}
  .flow{grid-template-columns:repeat(2,1fr)}
  .wf{grid-template-columns:1fr}
  .rung{grid-template-columns:30px 1fr auto;gap:10px}
  .btn{font-size:15px;padding:7px 7px 7px 28px;gap:13px}
  .btn .arw{width:40px;height:40px}
  .btn .arw svg{width:17px;height:17px}
}