:root{
  /* DESIGN.md colors */
  --kinari:#EFEBDF; --hatake:#2FAF81; --minori:#F3E46A; --sumi:#1B3329; --hai:#5B675F;
  /* DESIGN.md components（派生色） */
  --fukamidori:color-mix(in srgb, var(--hatake) 35%, var(--sumi));
  --field:color-mix(in srgb, var(--kinari) 35%, white);
  --line-idle:color-mix(in srgb, var(--hai) 35%, var(--kinari));
  --ruler-track:color-mix(in srgb, var(--hatake) 18%, var(--kinari));
  --tint:color-mix(in srgb, var(--hatake) 10%, var(--kinari));
  --rule:color-mix(in srgb, var(--hai) 28%, var(--kinari));

  --display:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --body:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium",Meiryo,sans-serif;
  --data:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* 配置（DESIGN.md Layout）：左端は全画面で .wrap の1本に揃える */
  --gutter:16px; --wrap:1120px; --col-gap:48px;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px;
  /* 文字の段（スマホ → 受付端末で一段ずつ上げる）。極太(900)は 節見出し t-sec・社名と見立て t-name・画面見出し だけに使う */
  --t-label:14px; --t-small:15px; --t-body:17px; --t-name:20px; --t-theme:20px; --t-sec:24px;
  --radius:14px; --cta-h:56px;
  --marks:44px; --node:30px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
@supports not (color:color-mix(in srgb, red, blue)){
  :root{--fukamidori:#225E48; --field:#F8F7F2; --line-idle:#B7B9AE; --ruler-track:#D2E2D5; --tint:#E3E7DA; --rule:#C6C6BC;}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--kinari); color:var(--sumi); font-family:var(--body); font-size:var(--t-body); line-height:1.8; letter-spacing:.02em; line-break:strict}
h1,h2,h3{font-family:var(--display); font-weight:900; line-height:1.3; letter-spacing:-.01em; margin:0; text-wrap:balance; font-feature-settings:"palt"}
p, ol, dl{margin:0}
button,input,textarea{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--sumi); outline-offset:3px}
.nb{white-space:nowrap}
.num{font-family:var(--data); font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:0}
.k{display:block; font-family:var(--display); font-weight:700; font-size:var(--t-label); line-height:1.4; letter-spacing:.04em; color:var(--hai)}

/* ---------- 枠：ヘッダー・本文・フッターは同じ .wrap ---------- */
.wrap{width:100%; max-width:calc(var(--wrap) + 2 * var(--gutter)); margin-inline:auto; padding-inline:var(--gutter)}
.bar{border-bottom:1px solid var(--rule)}
.bar .wrap{display:flex; align-items:center; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; padding-block:12px}
.brand{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.brand .ev{font-family:var(--display); font-weight:900; font-size:15px; letter-spacing:.04em; color:color-mix(in srgb, var(--hatake) 50%, var(--sumi))}  /* 生成り上 4.93:1（小さい字なので h1 の社名より濃く） */
.brand .app{font-family:var(--display); font-weight:900; font-size:17px}
.brand small{font-weight:700; font-size:13px; color:var(--hai)}
.mock{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px}
.flag{font-size:13px; font-weight:700; color:var(--hai); border:1px solid var(--hai); border-radius:999px; padding:2px 10px; white-space:nowrap}
.mock nav{display:flex; gap:14px; font-size:14px; font-weight:700}
.mock nav a{color:var(--hai)}
.screen{display:none; padding-bottom:var(--s5)}
body[data-screen="entry"] #entry,
body[data-screen="loading"] #loading,
body[data-screen="result"] #result{display:block}
.note{border-top:1px solid var(--rule); padding-block:20px 28px; font-size:14px; line-height:1.7; color:var(--hai)}
.cols > * + *{margin-top:var(--s4)}

/* ---------- ボタン ---------- */
.cta{display:flex; align-items:center; justify-content:center; width:100%; min-height:var(--cta-h); padding:12px 20px; border:0; border-radius:var(--radius); background:var(--fukamidori); color:var(--kinari); font-family:var(--display); font-weight:900; font-size:var(--t-name); letter-spacing:.06em; cursor:pointer; transition:transform 120ms var(--ease), background 160ms var(--ease)}
.cta:hover{background:color-mix(in srgb, var(--fukamidori) 85%, var(--sumi))}
.cta:active{transform:scale(.97)}
.ghost{display:inline-flex; align-items:center; min-height:48px; padding:8px 0; background:none; border:0; color:var(--sumi); font-weight:700; text-decoration:underline; text-underline-offset:4px; cursor:pointer}

/* ---------- 署名：畑から食卓までの一本線（ここだけ全幅） ---------- */
.chain{position:relative; padding:16px 0 14px; --line:var(--line-idle)}
.chain.is-live{--line:var(--hatake)}
.chain:not(.is-live){--marks:8px}
.chain::before{content:""; position:absolute; left:0; right:0; top:calc(16px + var(--marks) + var(--node) / 2 - 3px); height:6px; background:var(--line); transform-origin:left center}
.rail{position:relative; list-style:none; margin:0 auto; padding:0 6px; display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); max-width:calc(var(--wrap) + 2 * var(--gutter))}
.rail li{display:grid; grid-template-rows:var(--marks) var(--node) auto auto; justify-items:center; text-align:center; position:relative; z-index:1}
.mark{align-self:end; padding-bottom:4px; font-family:var(--display); font-weight:900; font-size:14px; line-height:1.2; white-space:nowrap}
.node{align-self:center; width:16px; height:16px; border-radius:50%; background:var(--kinari); border:3px solid var(--line)}
.node.you{width:22px; height:22px; background:var(--sumi); border:4px solid var(--kinari); box-shadow:0 0 0 2px var(--sumi)}
.node.rank{width:auto; min-width:30px; height:30px; padding-inline:6px; border-radius:999px; display:grid; place-items:center; background:var(--fukamidori); border:0; color:var(--minori); font-size:15px}
.stage{font-family:var(--display); font-weight:900; font-size:16px; line-height:1.3; padding-top:6px; white-space:nowrap}
.tag{display:none}
.arcs{position:absolute; left:6px; right:6px; top:0; height:calc(var(--marks) + var(--node) / 2); width:calc(100% - 12px); overflow:visible; pointer-events:none; z-index:0}
.arcs path{fill:none; stroke:var(--sumi); stroke-width:2; vector-effect:non-scaling-stroke; stroke-linecap:round; opacity:.55}
.support{margin-top:12px; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; padding:8px 14px; border-radius:999px; background:var(--tint); font-size:14px; line-height:1.5; color:var(--hai)}
.support b{font-family:var(--display); font-weight:900; color:var(--sumi); white-space:nowrap}

/* ---------- 1 入口 ---------- */
.entry-head{padding-top:var(--s3)}
.ask{font-family:var(--display); font-weight:700; font-size:var(--t-small); color:var(--hai)}
#entry h1{margin-top:6px; font-size:clamp(2.25rem, 1.2rem + 5vw, 3.5rem)}
.lead{margin-top:12px}
#entry-form{margin-top:var(--s3)}
.entry-grid > aside{margin-top:var(--s4)}
.field + .field{margin-top:var(--s3)}
.field-label{display:block; font-family:var(--display); font-weight:900; font-size:var(--t-name); line-height:1.4; margin-bottom:8px}
.field .hint{margin:-2px 0 8px; font-size:var(--t-small); line-height:1.6; color:var(--hai)}
.input{display:block; width:100%; min-height:60px; padding:12px 16px; border:2px solid var(--sumi); border-radius:var(--radius); background:var(--field); font-size:20px}
.input::placeholder{color:var(--hai)}
textarea.input{min-height:112px; resize:vertical; font-size:18px; line-height:1.6}
form .cta{margin-top:var(--s3)}
.alt{margin-top:var(--s1)}
.know{padding:var(--s3) var(--s2); border-radius:var(--radius); background:var(--tint)}
.know h2{font-size:var(--t-name)}
.know ol{list-style:none; padding:0; margin-top:var(--s2); display:grid; gap:12px; counter-reset:k}
.know li{display:grid; grid-template-columns:28px minmax(0, 1fr); column-gap:12px; counter-increment:k}
.know li::before{content:counter(k); grid-row:span 2; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--fukamidori); color:var(--minori); font-family:var(--data); font-weight:600; font-size:14px; line-height:1}
.know b{font-family:var(--display); font-weight:900; line-height:1.4}
.know li span{font-size:var(--t-small); line-height:1.6; color:var(--hai)}
.qr-box{display:grid; grid-template-columns:auto minmax(0, 1fr); gap:16px; align-items:center; padding:var(--s2); border-radius:var(--radius); background:var(--tint)}
.qr{width:96px; height:96px; display:grid; place-items:center; border:2px solid var(--sumi); border-radius:8px; background:var(--field); font-family:var(--data); font-size:13px; color:var(--hai)}
.qr-box h2, .qr-box h3{font-size:var(--t-name)}
.qr-box p{font-size:var(--t-small); line-height:1.6; margin-top:2px}
.know + .qr-box{margin-top:var(--s2)}
.kiosk-only{display:none !important}

/* ---------- 2 解析中 ---------- */
#loading{background:var(--fukamidori); color:var(--kinari); min-height:calc(100svh - 64px); padding-top:var(--s4)}
#loading .sub{font-weight:700; font-size:var(--t-small); color:color-mix(in srgb, var(--kinari) 80%, var(--fukamidori))}
#loading h1{margin-top:6px; font-size:clamp(1.75rem, 1rem + 3vw, 2.75rem)}
.log{list-style:none; margin-top:var(--s4); padding:0; display:grid; gap:12px}
.log li{display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:14px; align-items:baseline}
.log .t{font-size:14px; color:color-mix(in srgb, var(--kinari) 82%, var(--fukamidori))}
.log li.wait{opacity:.35}
.progress{margin-top:var(--s4)}
.progress .track{position:relative; height:14px; border-radius:999px; background:color-mix(in srgb, var(--kinari) 22%, var(--fukamidori)); overflow:hidden}
.progress .fill{position:absolute; inset:0; background:var(--kinari); transform-origin:left; transform:scaleX(var(--p, .7)); transition:transform 600ms var(--ease)}
.progress .ticks{position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), color-mix(in srgb, var(--fukamidori) 70%, transparent) calc(10% - 1px) 10%)}
.progress p{margin-top:10px; font-size:var(--t-small)}

/* ---------- 3 結果 ---------- */
.result-head{padding-top:var(--s3)}
#result .co{font-size:clamp(1.75rem, 1rem + 3vw, 3rem)}
#result .co span{color:color-mix(in srgb, var(--hatake) 70%, var(--sumi)); white-space:nowrap}
.summary{margin-top:10px; font-size:var(--t-body)}
#result .chain{margin-top:var(--s2)}
.matches{margin-top:var(--s4); display:grid; gap:var(--s3)}

/* 相手企業のカード：3社とも同じ骨格（見出し → 掛け算 → 物差し → 聞くこと） */
.match{padding:20px var(--s2) var(--s3); border-radius:var(--radius); background:var(--field); border:2px solid var(--rule)}
.match.is-top{border-color:var(--sumi)}
.m-head{display:grid; grid-template-columns:36px minmax(0, 1fr) auto; column-gap:12px; align-items:start}
.badge{width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:var(--fukamidori); color:var(--minori); font-size:17px; line-height:1}
.m-name h2{font-size:var(--t-name); line-height:1.35}
.prod{margin-top:2px; font-size:var(--t-small); line-height:1.5; color:var(--hai)}
.m-score{display:grid; justify-items:end; text-align:right}
.m-score .k{font-size:14px}
.m-score .val{font-size:34px; line-height:1; color:var(--fukamidori)}
.m-score .val small{font-size:16px; margin-left:1px}

.eq{margin-top:var(--s3); display:grid; gap:6px}
.eq .cell{padding:12px 14px; border-radius:10px; background:var(--tint)}
.eq .cell p{margin-top:2px; line-height:1.6}
.eq .src{display:block; font-weight:700; font-size:var(--t-label); letter-spacing:.02em; color:var(--hai); white-space:nowrap}
.eq .out .src{color:color-mix(in srgb, var(--kinari) 82%, var(--fukamidori))}
.eq .op.to{transform:rotate(90deg)}
.eq .op{justify-self:center; align-self:center; font-family:var(--data); font-weight:600; font-size:20px; line-height:1; color:var(--hai)}
.eq .out{background:var(--fukamidori); color:var(--kinari)}
.eq .out .k{color:color-mix(in srgb, var(--kinari) 82%, var(--fukamidori))}
.eq .out p{font-family:var(--display); font-weight:900; font-size:var(--t-theme); line-height:1.45; letter-spacing:0}

.axes{margin-top:var(--s3)}
.rulers{margin-top:var(--s1); display:grid; gap:14px}
.rulers > div{display:grid; grid-template-columns:2.6em minmax(0, 1fr) 2.2em; column-gap:10px; row-gap:2px; align-items:center}
.rulers dt{font-family:var(--display); font-weight:700; font-size:var(--t-small); white-space:nowrap}
.rulers dd{margin:0}
.bar-r{display:block; position:relative; height:12px; border-radius:999px; background:var(--ruler-track); overflow:hidden}
.bar-r::before{content:""; position:absolute; inset:0; background:var(--hatake); transform-origin:left; transform:scaleX(calc(var(--v) / 100))}
.bar-r::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), color-mix(in srgb, var(--hai) 45%, transparent) calc(10% - 1px) 10%)}
.rulers .v{font-size:var(--t-body); text-align:right}
.rulers .r{grid-column:2 / -1; font-size:var(--t-body); line-height:1.6}  /* 理由の文は診断の中身なので本文の大きさ */

.m-ask{margin-top:var(--s3); padding-top:var(--s2); border-top:1px solid var(--rule)}
.m-ask .q{display:block; margin-top:2px; font-family:var(--display); font-weight:700; line-height:1.6}

.how{margin-top:var(--s3); font-size:var(--t-small); line-height:1.75; color:var(--hai)}
.how summary{padding-block:12px; font-weight:700; color:var(--sumi); cursor:pointer}
.how > p, .how dl{max-width:46em}
.how dl{margin-block:10px; display:grid; gap:4px}
.how dl > div{display:grid; grid-template-columns:3em minmax(0, 1fr); gap:8px}
.how dt{font-weight:700; color:var(--sumi)}
.how dd{margin:0}

.go{margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid var(--rule)}
.go h2{font-size:var(--t-sec)}
.go-lead{margin-top:var(--s1)}
.actions{margin-top:var(--s3)}
.actions .ghost{margin-top:var(--s1)}
.print-only{display:none}

/* ---------- 結果の再生（JS がある時だけ。1回だけ） ---------- */
@keyframes draw{from{transform:scaleX(0)}}
@keyframes drop{from{opacity:0; transform:translateY(-14px)}}
@keyframes pop{from{opacity:0; transform:scale(.95)}}
/* 弧は不透明度だけで出す。stroke-dasharray で線を引くと、受付端末幅で non-scaling-stroke と食い違い途中で切れる（2026-10-22） */
@keyframes arc{from{opacity:0}}
@keyframes fill{from{transform:scaleX(0)}}
#result.play .chain::before{animation:draw 500ms var(--ease) both}
#result.play .node.you, #result.play .mark{animation:drop 220ms var(--ease) 450ms both}
#result.play .arcs path{animation:arc 420ms var(--ease) both}
#result.play .arcs path:nth-child(1){animation-delay:650ms}
#result.play .arcs path:nth-child(2){animation-delay:770ms}
#result.play .arcs path:nth-child(3){animation-delay:890ms}
#result.play .node.rank{animation:pop 220ms var(--ease) both}
#result.play li[data-rank="1"] .node.rank{animation-delay:1000ms}
#result.play li[data-rank="2"] .node.rank{animation-delay:1120ms}
#result.play li[data-rank="3"] .node.rank{animation-delay:1240ms}
#result.play .bar-r::before{animation:fill 600ms var(--ease) 700ms both}
@media (prefers-reduced-motion: reduce){
  #result.play *, #result.play .chain::before, #result.play .bar-r::before{animation:none !important}
  .progress .fill{transition:none}
}

/* ---------- 受付端末（横長・タッチ） ---------- */
@media (min-width: 1024px){
  :root{--gutter:32px; --cta-h:72px; --marks:64px; --node:36px;
        --t-label:16px; --t-small:17px; --t-body:20px; --t-name:24px; --t-theme:24px; --t-sec:32px}
  .bar .wrap{padding-block:16px}
  .brand .ev{font-size:18px}
  .brand .app{font-size:22px}
  /* 2列の割り付けは全画面で同じ（本文 7：脇 5） */
  .cols{display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); column-gap:var(--col-gap); align-items:start}
  .cols > * + *{margin-top:0}
  .rail{padding-inline:var(--gutter)}
  .arcs{left:var(--gutter); right:var(--gutter); width:calc(100% - 2 * var(--gutter))}
  .chain::before{top:calc(16px + var(--marks) + var(--node) / 2 - 4px); height:8px}
  .mark{font-size:20px}
  .node{width:20px; height:20px}
  .node.you{width:28px; height:28px}
  .node.rank{width:auto; min-width:36px; height:36px; padding-inline:8px; font-size:18px}
  .stage{font-size:24px; padding-top:8px}
  /* 相手の札：1社1枚を縦に積み、列の幅を越えるときだけ折り返す（隣の段とぶつけない） */
  .tag{display:grid; justify-items:center; align-self:start; align-content:start; gap:4px; margin-top:6px; max-width:100%}
  .tag span{max-width:100%; padding:2px 10px; border-radius:var(--radius); background:var(--fukamidori); color:var(--kinari); font-weight:700; font-size:14px; line-height:1.5; letter-spacing:0; text-align:center; text-wrap:balance; overflow-wrap:anywhere}
  .support{font-size:16px; padding:10px 20px}
  .kiosk-only{display:block !important}
  .qr-box.kiosk-only{display:grid !important}
  .phone-only{display:none !important}
  /* 入口：上段「問い＋見出し｜リード」、下段「入力｜脇」。見出しを1行にし、右列の上を空けない */
  .entry-grid{display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); column-gap:var(--col-gap); row-gap:var(--s3); align-items:start}
  .entry-lead{align-self:end}
  .entry-lead .lead{margin-top:0}
  #entry-form, .entry-grid > aside{margin-top:0}
  #entry h1{font-size:clamp(2.25rem, 3.6vw, 2.75rem)}  /* 44px：7列に1行で収まる */
  .ask{font-size:20px}
  .input{min-height:84px; font-size:30px; padding-inline:24px}
  textarea.input{min-height:132px; font-size:24px}
  .know{padding:var(--s3)}
  .know li::before{width:32px; height:32px; font-size:16px}
  .know li{grid-template-columns:32px minmax(0, 1fr)}
  .qr-box{padding:var(--s3)}
  .qr{width:112px; height:112px}
  #loading{padding-top:var(--s5)}
  .log{gap:16px}
  .log li{font-size:22px}
  .log .t{font-size:16px}
  .match{padding:28px 32px 32px}
  .m-head{grid-template-columns:44px minmax(0, 1fr) auto; column-gap:16px; align-items:center}
  .badge{width:44px; height:44px; font-size:20px}
  .m-score{grid-template-columns:auto auto; align-items:baseline; column-gap:12px}
  .m-score .k{font-size:16px}
  .m-score .val{font-size:52px}
  .m-score .val small{font-size:22px}
  .eq{grid-template-columns:minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1.2fr); gap:12px; align-items:stretch}
  .eq .cell{padding:16px 20px}
  .eq .src{font-size:var(--t-label)}
  .eq .op{font-size:26px}
  .eq .op.to{transform:none}
  .rulers{gap:12px}
  .rulers > div{grid-template-columns:3em 15em 2.6em minmax(0, 1fr); column-gap:16px}
  .rulers .r{grid-column:auto; font-size:var(--t-small)}
  .bar-r{height:16px}
}
/* 受付端末で画面の高さが低いとき（1366×768・1280×800 など）：待機中の線と入力欄を詰め、「相性を調べる」を1画面に収める */
@media (min-width: 1024px) and (max-height: 900px){
  #entry .chain{padding-block:10px 8px; --marks:0px; --node:24px}
  #entry .chain::before{top:calc(10px + var(--node) / 2 - 4px)}
  #entry .stage{font-size:var(--t-body); padding-top:2px}
  #entry .support{margin-top:8px; padding-block:6px}
  .entry-head{padding-top:var(--s2)}
  .entry-grid{row-gap:var(--s2)}
  .field + .field, #entry-form .cta{margin-top:var(--s2)}
  .input{min-height:72px}
  textarea.input{min-height:0; height:108px}
}

/* ---------- 印刷（受付端末の診断シート：A4 1枚） ---------- */
@media print{
  @page{size:A4 portrait; margin:9mm}
  :root{--gutter:0px; --t-label:7.5pt; --t-small:8pt; --t-body:8.5pt; --t-name:11pt; --t-theme:10pt;
        --s1:3px; --s2:6px; --s3:8px; --s4:10px; --s5:0px; --marks:22px; --node:22px}
  body{background:#fff; font-size:8.5pt; line-height:1.5}
  .bar .mock, .actions, .how, .go .qr-box, #entry, #loading, .screen-only, .note{display:none !important}
  .bar .wrap{padding-block:0 4px}
  .print-only{display:inline}
  #result{display:block !important}
  #result .co{font-size:17pt}
  .summary{margin-top:2px; font-size:9pt}
  .chain{padding-block:2px 0}
  .chain::before{top:calc(2px + var(--marks) + var(--node) / 2 - 2px); height:4px}
  .mark{font-size:8pt}
  .node.rank{width:auto; min-width:20px; height:20px; padding-inline:4px; font-size:8pt}
  .node.you{width:16px; height:16px}
  .stage{font-size:9pt; padding-top:2px}
  .support{margin-top:4px; padding:3px 10px; font-size:7.5pt}
  .matches{gap:6px}
  .match{padding:8px 12px; border-width:1.5px; break-inside:avoid}
  .m-head{grid-template-columns:24px minmax(0, 1fr) auto; column-gap:8px; align-items:center}
  .badge{width:24px; height:24px; font-size:10pt}
  .prod{margin-top:0}
  .m-score{grid-template-columns:auto auto; align-items:baseline; column-gap:6px}
  .m-score .val{font-size:20pt}
  .m-score .val small{font-size:9pt}
  .eq{grid-template-columns:minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1.2fr); gap:4px; align-items:stretch}
  .eq .cell{padding:5px 8px; border-radius:6px}
  .eq .src{display:inline; margin-left:4px; font-size:6.5pt}
  .eq .cell p{margin-top:0; line-height:1.45}
  .eq .op{font-size:10pt}
  .eq .op.to{transform:none}
  .rulers{margin-top:2px; gap:1px}
  .rulers > div{grid-template-columns:2.6em 10em 2.2em minmax(0, 1fr); column-gap:8px}
  .rulers .r{grid-column:auto; line-height:1.5}
  .rulers .v{font-size:8.5pt}
  .bar-r{height:7px}
  .m-ask{display:grid; grid-template-columns:max-content minmax(0, 1fr); column-gap:10px; align-items:baseline; padding-top:5px}
  .m-ask .q{margin-top:0}
  .go{margin-top:6px; padding-top:6px}
  .go .cols > div{display:flex; flex-wrap:wrap; align-items:baseline; gap:0 12px}
  .go h2{font-size:10pt}
  .go-lead{margin-top:0}
}

/* =====================================================================
   本番アプリの追加（2026-10-21 フィードバック反映）
   - マクニカ表記: ヘッダー右の Powered by ロックアップと、画面最上部の紫3px罫（ブランド色 #7E1082 はこの2か所だけ）
   - スマホ完結: 結果の共有、受付端末のQR
   - 社名なしルート、順番待ち、簡易診断の案内、入れ直し
   ===================================================================== */
:root{ --macnica:#7E1082; }
.bar{border-top:3px solid var(--macnica)}
.brand{color:inherit; text-decoration:none}
.powered{display:flex; align-items:center; gap:8px; margin:0; font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:.04em; color:var(--hai); white-space:nowrap}
.powered img{display:block; width:auto; height:22px}
.pill-line{margin-top:12px; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:var(--t-small); line-height:1.6; color:var(--hai)}
.pill{display:inline-block; padding:3px 12px; border-radius:999px; background:var(--fukamidori); color:var(--kinari); font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.04em; white-space:nowrap}
.form-error{margin:12px 0 0; padding:10px 14px; border-radius:10px; background:color-mix(in srgb, #B3261E 10%, var(--kinari)); color:#8A1C16; font-weight:700; font-size:var(--t-small); line-height:1.6}
.interest{margin-top:var(--s3); padding:var(--s2); border:2px solid var(--rule); border-radius:var(--radius); background:var(--tint)}
.interest legend{padding:0 6px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.chip{min-height:44px; padding:8px 16px; border:2px solid var(--sumi); border-radius:999px; background:var(--field); font-family:var(--display); font-weight:700; font-size:15px; line-height:1.4; cursor:pointer}
.chip[aria-pressed="true"]{background:var(--fukamidori); color:var(--kinari); border-color:var(--fukamidori)}
.qr{display:block; width:112px; height:112px; padding:6px; border:2px solid var(--sumi); border-radius:8px; background:#fff; object-fit:contain}
.qr-take .qr{width:140px; height:140px}
.qr-box{align-items:center}
.loading-note{margin-top:var(--s3); font-size:var(--t-small); line-height:1.7; color:color-mix(in srgb, var(--kinari) 85%, var(--fukamidori))}
.loading-actions{margin-top:var(--s3); display:grid; gap:8px; max-width:28em}
.loading-actions .ghost{color:var(--kinari)}
.log li.soft{opacity:.8}
.banner{margin-top:12px; padding:10px 14px; border-radius:10px; background:var(--tint); font-size:var(--t-small); line-height:1.6; color:var(--hai)}
.node.rank.you-too{box-shadow:0 0 0 3px var(--kinari), 0 0 0 5px var(--sumi)}
.support .rk{display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 7px; margin-left:2px; border-radius:999px; background:var(--fukamidori); color:var(--minori); font-family:var(--data); font-weight:600; font-size:12px; line-height:1; vertical-align:middle}
.support .rk b{font-family:var(--display); font-weight:700; color:var(--kinari); font-size:12px; margin-left:6px}
.support .you-chip{display:inline-block; padding:1px 10px; margin-left:4px; border-radius:999px; background:var(--sumi); color:var(--kinari); font-family:var(--display); font-weight:700; font-size:12px; vertical-align:middle}
.share-note{margin:8px 0 0; font-size:var(--t-small); line-height:1.6; color:var(--hai)}
.credit{margin-top:8px; font-size:13px}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); max-width:calc(100% - 32px); padding:12px 18px; border-radius:12px; background:var(--fukamidori); color:var(--kinari); font-weight:700; font-size:15px; line-height:1.5; box-shadow:0 6px 24px rgba(27,51,41,.25); z-index:9}
.src-note{display:block; margin-top:4px; font-size:12px; color:var(--hai)}
@media (min-width: 1024px){
  .powered{font-size:14px}
  .powered img{height:28px}
  .chip{min-height:56px; padding:10px 22px; font-size:20px}
  .pill{font-size:15px}
  .qr-box.kiosk-only + .know{margin-top:var(--s2)}
  .qr-take .qr{width:168px; height:168px}
}
@media print{
  .bar{border-top-width:2px}
  .powered{font-size:8pt}
  .powered img{height:16px}
  .pill-line, .banner, .toast, .share-note, .loading-actions{display:none !important}
  .credit{font-size:7.5pt}
}

/* 和文の折り返し: 対応ブラウザ（Chrome 119+）では文節単位で折る。非対応はこれまでどおり */
body{word-break:auto-phrase}

/* hidden 属性を display 指定より優先する（解析中に「もう一度調べる」が出ていた不具合の修正 2026-10-22） */
[hidden]{display:none !important}

/* ---------- ぜひ話してみてほしい5社（2026-10-22） ----------
   1〜3位は社名と相性％だけ（理由は下のカード）、4・5位は「一緒にできそうなこと」の1行。
   スマホは順位の丸を出さず文の列を広げる。受付端末は左列に1〜3位、右列に4・5位。 */
.route{margin-top:var(--s4)}
.route-head h2, .cards-h{font-size:var(--t-sec)}
.route-lead{margin-top:4px; font-size:var(--t-small); line-height:1.6; color:var(--hai)}
.route-list{list-style:none; margin:var(--s2) 0 0; padding:0; display:grid; gap:8px}
.route-item{display:grid; grid-template-columns:76px minmax(0, 1fr); column-gap:12px; align-items:center; padding:12px var(--s2); border-radius:var(--radius); background:var(--field); border:2px solid var(--rule)}
.route-item .badge{display:none}
.route-item:first-child{border-color:var(--sumi)}
.route-item.is-more{background:transparent}
.route-name{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; min-width:0; font-family:var(--display); font-weight:700; font-size:var(--t-body); line-height:1.4; overflow-wrap:anywhere}
.route-name a{color:inherit; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px}
.route-score{font-size:var(--t-small); color:var(--fukamidori)}
.route-together{margin-top:2px; font-size:var(--t-body); line-height:1.6; color:var(--sumi)}
.booth{display:inline-grid; justify-items:center; align-content:center; width:100%; min-height:52px; padding:4px 6px; border:2px solid var(--sumi); border-radius:10px; background:var(--kinari); line-height:1.1}
.booth-k{font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.04em; color:var(--hai)}
.booth-v{font-family:var(--display); font-weight:900; font-size:22px; color:var(--sumi)}
.booth-v.num{font-family:var(--data); font-weight:600}
.booth.is-text .booth-v{font-size:12px; line-height:1.3; text-align:center; white-space:nowrap}  /* 「ヤンマー棟」が札に収まる */
.booth.is-inline{display:inline-flex; align-items:baseline; gap:4px; width:auto; min-height:0; padding:0 8px; margin-right:8px; border-width:1.5px; border-radius:999px; vertical-align:baseline}
.booth.is-inline .booth-v{font-size:15px}
.cards-h{margin-top:var(--s4)}
.cards-h + .matches{margin-top:var(--s2)}
@media (min-width: 1024px){
  .route-list{grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-rows:repeat(3, 1fr); grid-auto-flow:column; gap:12px var(--s3)}
  .route-item{grid-template-columns:44px 84px minmax(0, 1fr); padding:16px 20px}
  .route-item .badge{display:grid}
  .booth{min-height:60px}
  .booth-v{font-size:28px}
  .booth.is-text .booth-v{font-size:14px}
}
@media print{
  .route{margin-top:6px}
  .route-head h2, .cards-h{font-size:10pt}
  .route-lead{font-size:7.5pt}
  .route-list{grid-template-columns:repeat(5, minmax(0, 1fr)); grid-template-rows:none; grid-auto-flow:row; gap:4px; margin-top:4px}
  .route-item{grid-template-columns:1fr; padding:4px 6px; border-width:1.5px; row-gap:2px; justify-items:start}
  .route-item .badge{display:none}
  .booth{width:auto; min-height:0; padding:1px 6px}
  .booth-v{font-size:11pt}
  .booth-k{font-size:6pt}
  .route-name{font-size:8.5pt}
  .route-together{font-size:7pt}
  .cards-h{margin-top:6px}
}
/* 印刷をA4 1枚に戻す（5社一覧を足して2枚になっていた 2026-10-22）。札は1行、4・5位の列を広げ、カード内の行間を詰める */
@media print{
  @page{margin:8mm}
  .chain{--marks:16px}
  .route-list{grid-template-columns:repeat(3, minmax(0, 1fr)) repeat(2, minmax(0, 1.3fr))}
  .route-item{row-gap:1px}
  .route-item .booth{display:inline-flex; align-items:baseline; gap:3px; min-height:0; padding:0 6px; border-width:1.5px; border-radius:999px}
  .route-item .booth-v{font-size:9pt}
  .route-together{line-height:1.35}
  .eq .cell p{font-size:8pt; line-height:1.4}
  .eq .out p{font-size:9pt; line-height:1.35}
  .rulers .r{font-size:8pt; line-height:1.4}
  .axes{margin-top:6px}
  .m-ask{margin-top:6px; padding-top:4px}
  .m-name{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:8px}  /* 社名と製品を1行に */
  .route-lead, .go h2, .axes > .k{display:none}  /* 紙では抽選の案内・「会場へ」の見出し・物差しの小見出しを省く（行ごとに技術／現場／市場と書いてある） */
}