/* レイアウト: 左=お客様が見る画面（白いカード）、右=社内向けの解説（黄色の吹き出し）。900px未満は吹き出しを画面の下に積む。
   製品画面を模したデモなので、ライトテーマ1本に固定（色はすべて明示）。スポットのブランド: シアン/イエロー/マゼンタ・フラット・角丸4px・グラデなし・料金はマゼンタ */
:root{
  color-scheme:light;
  --bg:#EEF3F5; --surface:#FFFFFF; --ink:#101820; --sub:#46525C; --muted:#6B7883; --line:#D8E0E4; --line-soft:#E8EEF1;
  --cyan:#00C8E4; --cyan-ink:#00788C; --cyan-tint:#E3F8FB;
  --magenta:#E5006E; --magenta-ink:#C7005F; --magenta-tint:#FDE8F1;
  --yellow:#FFD400; --yellow-tint:#FFF7CC;
  --danger:#C62828; --danger-tint:#FDECEC; --warn:#9A5B00; --warn-tint:#FFF3DC; --ok:#1B7F3B; --ok-tint:#E7F5EC;
  --freee:#2864F0;
  --font:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Consolas,monospace;
  --r:4px;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.75;margin:0;-webkit-font-smoothing:antialiased}
.wrap{max-width:1240px;margin:0 auto;padding-inline:16px;padding-block:0 72px}
h1,h2,h3{text-wrap:balance;line-height:1.45;margin:0}
a{color:var(--cyan-ink)}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

/* ── デモの帯 ── */
.demo-bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--ink);color:#fff}
.demo-bar .in{max-width:1240px;margin:0 auto;padding:8px 16px;display:flex;gap:8px 16px;align-items:center;flex-wrap:wrap;font-size:13px}
.demo-tag{background:var(--yellow);color:var(--ink);font-weight:900;padding:1px 8px;border-radius:2px;letter-spacing:.08em;font-size:12px}
.demo-bar .sp{flex:1}
.tbtn{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6);border-radius:var(--r);padding:4px 12px;min-height:32px;cursor:pointer;font-size:13px}
.tbtn:hover{background:rgba(255,255,255,.1)}

/* ── ページの見出し ── */
.masthead{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;padding-block:24px 8px}
.masthead img{height:36px;width:auto}
.masthead .tt{font-size:13px;color:var(--sub);border-left:1px solid var(--line);padding-left:20px}
@media (max-width:520px){.masthead .tt{border-left:0;padding-left:0}}
.masthead .tt b{display:block;font-size:18px;color:var(--ink);font-weight:900;letter-spacing:.02em}

/* ── 進行 ── */
.steps{display:flex;margin:16px 0 0;padding:0;list-style:none;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.steps li{flex:1 0 auto}
.steps li+li{border-left:1px solid var(--line-soft)}
.steps button{all:unset;cursor:pointer;display:flex;gap:8px;align-items:center;justify-content:center;white-space:nowrap;padding:10px 16px;font-size:13px;color:var(--muted);width:100%;box-sizing:border-box;min-height:28px;position:relative}
.steps button .n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.steps button.past{color:var(--sub)}
.steps button.past .n{background:var(--cyan-tint);border-color:var(--cyan);color:var(--cyan-ink)}
.steps button[aria-current="step"]{color:var(--ink);font-weight:700}
.steps button[aria-current="step"] .n{background:var(--ink);border-color:var(--ink);color:#fff}
.steps button[aria-current="step"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--cyan)}
.steps button:focus-visible{outline:3px solid var(--cyan);outline-offset:-3px}

/* ── 画面と吹き出しの2列 ── */
.screen{display:none}
.screen.on{display:block}
.row{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:28px;align-items:start;margin-top:20px}
.row>.main{min-width:0}
.bubble{position:relative;background:var(--yellow);color:var(--ink);border-radius:var(--r);padding:14px 16px;font-size:13.5px;line-height:1.75}
.bubble::before{content:"";position:absolute;left:-10px;top:20px;border:10px solid transparent;border-left:0;border-right-color:var(--yellow)}
.bubble .k{display:inline-block;background:var(--ink);color:var(--yellow);font-size:11px;font-weight:700;letter-spacing:.1em;padding:0 6px;border-radius:2px;margin-right:6px;vertical-align:1px}
.bubble p{margin:0}.bubble p+p{margin-top:8px}
.bubble code{font-family:var(--mono);font-size:12px;background:rgba(16,24,32,.08);padding:0 4px;border-radius:2px}
.bubble .todo{display:block;margin-top:10px;border-top:1px dashed rgba(16,24,32,.35);padding-top:8px}
.notes-hidden .bubble{display:none}
.notes-hidden .row{grid-template-columns:minmax(0,1fr)}
@media (max-width:900px){
  .row{grid-template-columns:minmax(0,1fr);gap:14px}
  .bubble::before{left:28px;top:-10px;border:10px solid transparent;border-top:0;border-bottom-color:var(--yellow)}
}

/* ── お客様が見る画面 ── */
.app{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.app-head{display:flex;align-items:center;gap:12px;padding:12px 24px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.app-head .logo{height:26px;width:auto}
.app-head .sp{flex:1}
.app-body{padding:28px 24px}
.app-body.tight{padding-top:20px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--cyan-ink)}
.h1{font-size:28px;font-weight:900;margin-top:6px;letter-spacing:.01em}
.h2{font-size:20px;font-weight:900}
.h3{font-size:16px;font-weight:700}
.lead{color:var(--sub);margin:10px 0 0}
.field{display:grid;gap:6px;margin-top:18px}
.field label{font-weight:700;font-size:14px}
.field label .req{display:inline-block;font-size:11px;color:#fff;background:var(--danger);padding:0 5px;border-radius:2px;margin-left:6px;vertical-align:2px;font-weight:700}
.field input,.field textarea{border:1px solid #C3CDD3;background:var(--surface);color:var(--ink);border-radius:var(--r);padding:10px 12px;min-height:46px;width:100%}
.field input:focus,.field textarea:focus{border-color:var(--cyan-ink);outline:none;box-shadow:0 0 0 3px var(--cyan-tint)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:var(--r);border:2px solid var(--ink);background:var(--ink);color:#fff;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:#26323C;border-color:#26323C}
.btn.sub{background:var(--surface);color:var(--ink)}
.btn.sub:hover{background:var(--line-soft)}
.btn.cy{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}
.btn.cy:hover{background:#19D2EA;border-color:#19D2EA}
.btn.fr{background:var(--freee);border-color:var(--freee);color:#fff}
.btn.fr:hover{background:#1F55D6;border-color:#1F55D6}
.btn.sm{min-height:40px;padding:0 14px;font-size:13.5px;border-width:1px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;padding:1px 8px;border-radius:2px;border:1px solid var(--line);color:var(--sub);background:var(--surface)}
.ext::after{content:"";width:11px;height:11px;margin-left:2px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M5 1H1v10h10V7M7 1h4v4M11 1 5 7' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M5 1H1v10h10V7M7 1h4v4M11 1 5 7' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat}

/* 1. 入口 */
.gate{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:0}
.gate .intro{padding:32px 28px;background:var(--cyan-tint);border-right:1px solid var(--line-soft)}
.gate .intro ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px}
.gate .intro li{display:flex;gap:10px;font-size:14px}
.gate .intro li b{flex:none;width:24px;height:24px;border-radius:50%;background:var(--cyan-ink);color:#fff;display:grid;place-items:center;font-size:12px;margin-top:2px}
.gate .intro .can{gap:16px}
.gate .intro .can div{display:grid;gap:2px;min-width:0}
.gate .intro .can strong{font-size:15px}
.gate .intro .can span{font-size:13px;color:var(--sub)}
.gate form{padding:28px}
.src{margin-top:16px;font-size:12.5px;color:var(--muted)}
.src code{font-family:var(--mono);background:var(--cyan-tint);color:var(--cyan-ink);padding:1px 6px;border-radius:2px}
@media (max-width:700px){.gate{grid-template-columns:minmax(0,1fr)}.gate .intro{border-right:0;border-bottom:1px solid var(--line-soft)}}

/* 2. トップ */
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;border:2px solid var(--ink);border-radius:var(--r);padding:24px;position:relative}
.hero .free{display:inline-block;background:var(--yellow);padding:0 8px;border-radius:2px}
.hero .meta3{display:flex;gap:6px 18px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--sub)}
.hero .meta3 span::before{content:"✓";color:var(--cyan-ink);font-weight:900;margin-right:4px}
@media (max-width:640px){.hero{grid-template-columns:minmax(0,1fr)}}
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
@media (max-width:1100px){.vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.vgrid{grid-template-columns:minmax(0,1fr)}}
.vcard{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--surface);transition:border-color .15s}
a.vcard:hover{border-color:var(--ink)}
a.vcard:hover .play{background:var(--magenta)}
.vthumb{position:relative;aspect-ratio:16/9;background:#DDE5EA;overflow:hidden;max-width:100%}
.vthumb img{width:100%;height:100%;object-fit:cover;object-position:left top}
.play{position:absolute;left:12px;bottom:12px;width:44px;height:44px;border-radius:50%;background:var(--ink);display:grid;place-items:center;transition:background .15s}
.play::after{content:"";margin-left:3px;border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.vthumb .tag{position:absolute;top:10px;left:10px}
.vbody{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.vbody .t{font-weight:700;font-size:14.5px;line-height:1.55}
.vbody .d{font-size:12.5px;color:var(--muted)}
.vcard.prep .vthumb{background:repeating-linear-gradient(135deg,#EEF3F5 0 10px,#E4EBEF 10px 20px);display:grid;place-items:center;color:var(--muted);font-weight:700;font-size:13px}

/* 3. freee 連携 */
.how{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;background:var(--cyan-tint);border-radius:var(--r);padding:16px 20px}
.how b{font-size:15px}
.isteps{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:0;counter-reset:s}
.istep{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;position:relative;padding-bottom:28px}
.istep::before{counter-increment:s;content:counter(s);width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;font-weight:900;display:grid;place-items:center;font-size:16px;position:relative;z-index:1}
.istep:not(:last-child)::after{content:"";position:absolute;left:19px;top:40px;bottom:0;border-left:2px solid var(--line)}
.istep .bd{min-width:0;padding-top:6px}
.istep .bd>p{margin:6px 0 0;font-size:14px;color:var(--sub)}
.istep .path{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px;font-size:13.5px}
.istep .path span{border:1px solid var(--line);border-radius:2px;padding:1px 8px;background:var(--surface);font-weight:700}
.istep .path i{font-style:normal;color:var(--muted)}
.shot{margin:12px 0 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);max-width:100%}
.shot .bar{display:flex;gap:6px;align-items:center;padding:6px 10px;background:var(--line-soft);border-bottom:1px solid var(--line)}
.shot .bar i{width:9px;height:9px;border-radius:50%;background:#C9D3D9}
.shot img{width:100%;height:auto}
.shot.narrow{max-width:210px}
.shot.mid{max-width:520px}
.shot figcaption{font-size:11.5px;color:var(--muted);padding:6px 10px;border-top:1px solid var(--line-soft)}
.shot figcaption a{color:inherit}
.copy{display:flex;align-items:stretch;gap:0;margin-top:10px;max-width:440px;border:1px solid var(--ink);border-radius:var(--r);overflow:hidden}
.copy input{flex:1;min-width:0;border:0;padding:8px 12px;font-family:var(--mono);font-size:14px;background:var(--surface);color:var(--ink);min-height:44px}
.copy button{border:0;background:var(--ink);color:#fff;font-weight:700;padding:0 16px;cursor:pointer;min-height:44px;white-space:nowrap}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;margin-top:10px;font-size:14px}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:700}
.safe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:8px}
.safe div{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;font-size:13px;color:var(--sub)}
.safe div b{display:block;color:var(--ink);font-size:14px;margin-bottom:2px}
@media (max-width:700px){.safe{grid-template-columns:minmax(0,1fr)}.how{grid-template-columns:minmax(0,1fr)}}
details.more{margin-top:16px;border-top:1px solid var(--line-soft);padding-top:12px}
details.more summary{cursor:pointer;font-weight:700;font-size:14px;min-height:28px}
.done-note{display:none;margin-top:12px;font-size:13.5px;color:var(--ok);font-weight:700}

/* 4. 点検中 */
.progress{height:8px;background:var(--line-soft);border-radius:var(--r);overflow:hidden;margin-top:18px}
.progress i{display:block;height:100%;width:0;background:var(--cyan);transition:width .25s linear}
.clist{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px}
@media (max-width:640px){.clist{grid-template-columns:minmax(0,1fr)}}
.clist li{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--muted)}
.clist li .st{width:20px;height:20px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:11px;font-weight:900;flex:none}
.clist li.done{color:var(--ink)}
.clist li.done .st{background:var(--ok);border-color:var(--ok);color:#fff}
.accept{display:flex;gap:10px;align-items:center;background:var(--ok-tint);color:var(--ok);font-weight:700;font-size:13.5px;padding:10px 14px;border-radius:var(--r);margin-top:16px}

/* 5. 結果 */
.verdict{border:2px solid var(--danger);border-radius:var(--r);padding:16px 18px;display:flex;gap:12px;align-items:flex-start;background:var(--surface)}
.verdict svg{flex:none;margin-top:3px;color:var(--danger)}
.verdict b{color:var(--danger);font-size:16px}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.tile{border:1px solid var(--line);border-radius:var(--r);padding:12px 16px}
.tile .lb{font-size:12.5px;font-weight:700;color:var(--sub)}
.tile .v{font-size:34px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.15}
.tile .v small{font-size:14px;font-weight:700;margin-left:2px}
.tile.d{border-top:4px solid var(--danger)}.tile.d .v{color:var(--danger)}
.tile.w{border-top:4px solid var(--warn)}.tile.w .v{color:var(--warn)}
.tile.o{border-top:4px solid var(--ok)}.tile.o .v{color:var(--ok)}
.meta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;color:var(--muted);margin-top:6px}
.issue{border:1px solid var(--line);border-left:4px solid var(--danger);border-radius:var(--r);padding:14px 16px;display:grid;gap:6px}
.issue.w{border-left-color:var(--warn)}
.issue .top{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sev{font-size:12px;font-weight:700;padding:1px 8px;border-radius:2px;background:var(--danger);color:#fff}
.issue.w .sev{background:var(--warn)}
.issue .tt{font-weight:700;font-size:15.5px}
.issue .who{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.issue .why{font-size:13.5px;margin:0}
.issue .fix{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:4px}
.issue .fix .nov{font-size:12.5px;color:var(--muted)}
details.okl{border:1px solid var(--line);border-radius:var(--r);padding:10px 16px}
details.okl summary{cursor:pointer;font-weight:700;color:var(--ok);min-height:28px}
details.okl ul{margin:8px 0 0;padding-left:20px;font-size:13.5px;columns:2;column-gap:32px}
@media (max-width:640px){details.okl ul{columns:1}.tiles{grid-template-columns:minmax(0,1fr)}}
.outside{border:2px solid var(--magenta);border-radius:var(--r);padding:20px}
.ogrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.ogrid>div{display:grid;gap:2px;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:var(--surface)}
.ogrid .lb{font-size:12.5px;font-weight:700;color:var(--sub)}
.ogrid .v{font-size:30px;font-weight:900;color:var(--magenta-ink);font-variant-numeric:tabular-nums;line-height:1.2}
.ogrid .v small{font-size:14px;margin-left:2px}
.ogrid .ex{font-size:12px;color:var(--muted)}
.ogrid .na .v{color:var(--muted)}
@media (max-width:640px){.ogrid{grid-template-columns:minmax(0,1fr)}}
.provider{font-size:12.5px;color:var(--sub);margin:14px 0 0}
.cta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
@media (max-width:640px){.cta-grid{grid-template-columns:minmax(0,1fr)}}
.cta{border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:6px;background:var(--surface)}
.cta.main{border:2px solid var(--ink)}
.cta .kind{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--cyan-ink)}
.cta .nm{font-weight:900;font-size:17px}
.cta .pr{font-weight:900;color:var(--magenta-ink);font-variant-numeric:tabular-nums;font-size:22px;line-height:1.3}
.cta .pr small{font-size:12px;color:var(--muted);font-weight:500;margin-left:4px}
.cta .pr.tbd{color:var(--muted);font-size:15px}
.cta .ds{font-size:13px;color:var(--sub);flex:1}
.cta .btn{margin-top:8px;align-self:flex-start}
.cta.soft{background:var(--cyan-tint);border-color:transparent}

/* 6. 申込 */
.sum{border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;font-size:13.5px;background:var(--bg)}
.sum dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;margin:0}
.sum dt{color:var(--muted)}.sum dd{margin:0;font-weight:500}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-top:8px}
.slots label{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;min-height:44px;cursor:pointer;font-size:13.5px;font-variant-numeric:tabular-nums}
.slots label:has(input:checked){border-color:var(--cyan-ink);background:var(--cyan-tint);font-weight:700}
.slots input{accent-color:var(--cyan-ink)}
.done-box{border:2px solid var(--ok);border-radius:var(--r);padding:18px;margin-top:16px}
.done-box b{color:var(--ok)}

/* 7. メール */
.mail{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.mail .hd{background:var(--bg);padding:14px 18px;font-size:13px;display:grid;gap:2px;border-bottom:1px solid var(--line);color:var(--sub)}
.mail .hd b{font-size:16px;color:var(--ink);margin-top:6px}
.mail .bd{padding:20px 22px;font-size:14.5px}
.mail .bd p{margin:0 0 12px}
.mail .bd .logo{height:24px;width:auto;margin-bottom:16px}
.mail table{border-collapse:collapse;width:100%;font-size:13.5px;margin:8px 0 16px}
.mail th,.mail td{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left;vertical-align:top}
.mail th{font-size:12px;color:var(--muted);font-weight:700}
.tag-m{font-size:11.5px;font-weight:700;padding:0 6px;border-radius:2px;border:1px solid currentColor;white-space:nowrap}
.tag-m.y{color:var(--magenta-ink)}.tag-m.n{color:var(--muted)}
.tbl{overflow-x:auto}
.foot-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:24px}
.page-foot{margin-top:40px;font-size:12px;color:var(--muted);display:flex;gap:8px 16px;flex-wrap:wrap;align-items:center}
.page-foot img{height:20px;width:auto}
@media (prefers-reduced-motion:reduce){.progress i,.vcard,.play{transition:none}}