/* 受注アシストの仕組み（アーキテクチャ）。実演画面（review.css）と同じ色・書体にそろえる。 */
:root{--green:#176353;--ink:#172f31;--muted:#576a67;--line:#d8e2dc;--bg:#f3f6f4;--ai:#2f5597;--ai-bg:#eaf0fa;--ai-line:#bccbe6;--program:#176353;--program-bg:#e9f2ed;--program-line:#bcd5c8;--person:#925718;--person-bg:#fff4e6;--person-line:#e8ccaa}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI","Yu Gothic UI",Meiryo,sans-serif;color:var(--ink);background:var(--bg);font-size:15px;line-height:1.75}
a{color:var(--green);text-underline-offset:4px}
.top{background:#fff;border-bottom:1px solid var(--line);padding:18px 3.2vw;display:flex;justify-content:space-between;align-items:center;gap:15px}
/* ロゴはトップページと同じ画像 */
.brand{font-size:23px;text-decoration:none;font-weight:800;color:#10273f}.brand span{font-size:15px;font-weight:500;color:var(--muted)}.brand{display:inline-flex;align-items:center;gap:14px}.brand-logo{display:block;width:200px;height:43px;object-fit:cover;object-position:center;flex:none}
.back{font-size:14px;font-weight:650}
main{max-width:1240px;margin:auto;padding:36px 3vw 24px}
h1{font-size:clamp(26px,2.6vw,36px);line-height:1.4;margin:6px 0 12px}
h2{font-size:21px;margin:0 0 6px;display:flex;align-items:center;gap:10px}
h3{font-size:16px;margin:0 0 6px}
p{margin:6px 0}
.eyebrow{font-size:13px;color:var(--green);font-weight:700;letter-spacing:.06em;margin:0}
.lead{font-size:16px;max-width:900px}
.note{font-size:13px;color:var(--muted);max-width:900px}
.num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;font-size:15px;flex:none}
.section-lead{color:var(--muted);font-size:14px;margin-bottom:16px}
.block{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px 26px;margin:22px 0}
.hero{margin-bottom:8px}

/* 役割の色（AI・プログラム・担当者） */
.chip{display:inline-block;border-radius:4px;padding:1px 8px;font-size:12px;font-weight:700;line-height:1.7}
.chip.ai{background:var(--ai);color:#fff}.chip.program{background:var(--program);color:#fff}.chip.person{background:var(--person);color:#fff}
.legend{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;color:var(--muted)}
.legend .chip{margin-right:8px}

/* 1. 処理の流れ：横に並べ、段階の間に矢印を描く */
.flow{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px}
.step{position:relative;border:1px solid;border-radius:10px;padding:12px 12px 14px;font-size:13px;line-height:1.7}
.step h3{font-size:15px;margin:8px 0 6px}
.step.ai{background:var(--ai-bg);border-color:var(--ai-line)}.step.program{background:var(--program-bg);border-color:var(--program-line)}.step.person{background:var(--person-bg);border-color:var(--person-line)}
.step-head{display:flex;justify-content:space-between;align-items:center}
.step-no{font-size:12px;color:var(--muted);font-weight:700}
.step .point{border-top:1px dashed #0000002a;padding-top:6px;margin-top:8px;font-weight:600;color:#284844}
.step:not(:last-child)::after{content:"";position:absolute;top:46px;right:-12px;width:10px;height:10px;border-top:2px solid var(--muted);border-right:2px solid var(--muted);transform:rotate(45deg);z-index:1}

/* 2. 分担 */
.roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.role{border:1px solid;border-radius:10px;padding:14px 16px}
.role.ai{background:var(--ai-bg);border-color:var(--ai-line)}.role.program{background:var(--program-bg);border-color:var(--program-line)}.role.person{background:var(--person-bg);border-color:var(--person-line)}
.role dl{margin:0;font-size:13.5px}.role dt{font-weight:700;margin-top:8px}.role dd{margin:2px 0 0}

/* 3. 実演環境の構成：左から右へ、区域ごとに箱を並べる */
.env{display:grid;grid-template-columns:minmax(0,.8fr) 26px minmax(0,1fr) 26px minmax(0,1.25fr) 26px minmax(0,1fr);align-items:stretch}
.zone{border:1.5px dashed #b9c9c0;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px;background:#fbfcfb}
.zone-label{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.04em;margin:0}
.zone.cloud{border-color:#e3b477;background:#fffaf2}.zone.pc{border-color:var(--program-line);background:#f6faf7}
.node{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:13px;line-height:1.65}
.node h3{font-size:14.5px;margin:0 0 4px}
.node.main{border:2px solid var(--green)}.node.store{background:#f4f6f5}
.arrow{position:relative;align-self:center;height:2px;background:var(--muted);margin:0 2px}
.arrow::after{content:"";position:absolute;right:-1px;top:-4px;width:8px;height:8px;border-top:2px solid var(--muted);border-right:2px solid var(--muted);transform:rotate(45deg)}
.aside{margin-top:16px;font-size:13.5px;background:var(--bg);border-left:3px solid var(--green);padding:10px 14px;border-radius:4px}

/* 4・5. データの扱いと範囲 */
.data{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.data-card{border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.data-card ul,.scope{margin:6px 0 0;padding-left:20px;font-size:14px}
.data-card li,.scope li{margin:3px 0}
.scope{columns:2;column-gap:40px}

footer{max-width:1240px;margin:auto;padding:8px 3vw 36px;color:var(--muted);font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* 画面が狭いときは縦に並べ、矢印を下向きにする */
@media(max-width:1100px){
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step:not(:last-child)::after{display:none}
  .env{grid-template-columns:1fr}
  .arrow{width:2px;height:22px;justify-self:center;margin:2px 0}
  .arrow::after{right:-4px;top:auto;bottom:-1px;transform:rotate(135deg)}
}
@media(max-width:700px){
  .flow,.roles,.data{grid-template-columns:1fr}
  .scope{columns:1}
  .top{padding:14px 16px;flex-wrap:wrap}.brand{font-size:20px;flex-direction:column;align-items:flex-start;gap:2px}.brand span{display:block;margin:0;font-size:12px}.brand-logo{width:150px;height:33px}
  main{padding:24px 16px}.block{padding:18px 16px}
}

/* ページの切り替え（業務の流れと分担／システム構成） */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:0 0 18px}.tabs a{padding:8px 14px;text-decoration:none;color:var(--muted);font-weight:650;font-size:14px;border-bottom:3px solid transparent;margin-bottom:-1px}.tabs a[aria-current="page"]{color:var(--green);border-bottom-color:var(--green)}

/* システム構成図（SVG）。色は属性ではなくここで決める */
.diagram-scroll,.table-scroll{overflow-x:auto}
.sys{display:block;width:100%;min-width:900px;height:auto}
.sys text{font-family:"Segoe UI","Yu Gothic UI",Meiryo,sans-serif}
.sys .zone{fill:#fbfcfb;stroke:#b9c9c0;stroke-width:1.5;stroke-dasharray:6 5}.sys .zone.cf{fill:#fffaf2;stroke:#e3b477}.sys .zone.pc{fill:#f6faf7;stroke:var(--program-line)}.sys .zone.ext{fill:#f7f8fb;stroke:#c3cbe0}
.sys .zl{font-size:13px;font-weight:700;fill:var(--muted)}
.sys .box{fill:#fff;stroke:var(--line);stroke-width:1.2}.sys .box.edge{stroke:#e3b477}.sys .box.key{stroke:var(--green);stroke-width:2}.sys .box.ai{fill:var(--ai-bg);stroke:var(--ai-line)}.sys .box.store{fill:#f1f4f2}.sys .box.note{fill:#fff;stroke:#b9c9c0;stroke-dasharray:4 4}
.sys .app{fill:#eef6f1;stroke:var(--green);stroke-width:2}
.sys .t{font-size:15px;font-weight:700;fill:var(--ink)}.sys .t.sm{font-size:13.5px}.sys .s{font-size:12px;fill:#44605a}.sys .lb{font-size:11.5px;fill:var(--muted);font-weight:600}
.sys .line{fill:none;stroke:#6b7f7a;stroke-width:1.6}.sys .head{fill:#6b7f7a}

/* 流れ・部品・守り方 */
.sequence{margin:0;padding-left:22px;font-size:14.5px}.sequence li{margin:8px 0;padding-left:4px}
code{font-family:ui-monospace,Consolas,monospace;font-size:.92em;background:#f1f4f2;padding:1px 5px;border-radius:4px}
.parts{width:100%;border-collapse:collapse;font-size:13.5px;min-width:720px}.parts th,.parts td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}.parts th{background:#f1f4f2;font-size:12.5px;color:var(--muted)}.parts td:first-child{font-weight:700;white-space:nowrap}
.checks{margin:0;padding-left:20px;font-size:14.5px}.checks li{margin:8px 0}
[hidden]{display:none!important}