.nav-bar { background: #353a80; color: #fff; padding: 12px 28px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.18); position: sticky; top: 0; z-index: 100; font-family: -apple-system, "Hiragino Kaku Gothic ProN", sans-serif; }
.nav-bar a.back { color: #fff; text-decoration: none; font-size: 13px; padding: 6px 14px; border: 1px solid rgba(255,255,255,0.4); border-radius: 4px; }
.nav-bar a.back:hover { background: rgba(255,255,255,0.15); }
.nav-bar .title { font-size: 14px; font-weight: 600; }
.nav-bar .badge { font-size: 11px; opacity: 0.85; padding: 3px 10px; border: 1px solid rgba(255,255,255,0.3); border-radius: 3px; }


* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', 'メイリオ', sans-serif; }
body { background: #f3f2f1; min-height: 100vh; }
.slide-stack { max-width: 1100px; margin: 32px auto 80px; padding: 0 30px; display: flex; flex-direction: column; gap: 28px; }
.slide-intro { background: #fff; border: 1px solid #e1dfdd; border-radius: 8px; padding: 18px 24px; font-size: 14px; color: #444; line-height: 1.7; }
.slide-intro strong { color: #353a80; }
.slide { width: 100%; aspect-ratio: 16 / 9; background: #fff; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); position: relative; overflow: hidden; }
.slide-label { font-size: 13px; color: #616161; margin-bottom: 6px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.slide-label .num { background: #353a80; color: #fff; padding: 2px 10px; border-radius: 3px; font-size: 11px; }
.slide .conf-foot { position: absolute; bottom: 14px; left: 24px; font-size: 10px; color: #aaa; letter-spacing: 0.08em; }
.slide .slide-num { position: absolute; bottom: 14px; right: 24px; font-size: 11px; color: #888; }
.slide.title { background: linear-gradient(135deg, #353a80 0%, #4b53bc 100%); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 60px; }
.slide.title .case { font-size: 48px; font-weight: 700; line-height: 1.2; margin-bottom: 12px; }
.slide.title .sub { font-size: 28px; font-weight: 500; line-height: 1.4; opacity: 0.95; }
.slide.title .meta { font-size: 16px; margin-top: 30px; opacity: 0.85; line-height: 1.6; }
.slide.title .conf-corner { position: absolute; top: 22px; right: 30px; font-size: 11px; opacity: 0.6; letter-spacing: 0.1em; }
.slide.content { padding: 40px 50px; }
.slide.content h2 { font-size: 28px; font-weight: 700; color: #353a80; border-bottom: 3px solid #353a80; padding-bottom: 8px; margin-bottom: 20px; }
.slide.content h3 { font-size: 20px; font-weight: 700; color: #353a80; margin: 14px 0 8px; }
.slide.content .lede { font-size: 16px; color: #424242; line-height: 1.7; margin-bottom: 22px; }
.slide.content .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.slide.content .kpi { background: #f0f3fa; border: 1px solid #d4dafa; border-radius: 8px; padding: 22px 14px; text-align: center; }
.slide.content .kpi .ico { font-size: 40px; line-height: 1; }
.slide.content .kpi .val { font-size: 22px; font-weight: 700; color: #353a80; margin: 6px 0 2px; }
.slide.content .kpi .lbl { font-size: 13px; color: #555; }
.slide.content .roadmap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 20px; }
.slide.content .roadmap .ph { background: #5b5fc7; color: #fff; padding: 24px 14px; border-radius: 8px; text-align: center; position: relative; }
.slide.content .roadmap .ph.dim { background: #c4c8e6; color: #444; }
.slide.content .roadmap .ph .n { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; }
.slide.content .roadmap .ph .l { font-size: 18px; font-weight: 700; margin-top: 4px; }
.slide.content .roadmap .ph .d { font-size: 14px; margin-top: 6px; opacity: 0.85; }
.slide.content ul { list-style: none; padding-left: 0; font-size: 16px; line-height: 1.9; color: #242424; }
.slide.content ul li { padding: 3px 0; padding-left: 20px; position: relative; }
.slide.content ul li::before { content: "●"; position: absolute; left: 0; color: #5b5fc7; font-size: 12px; top: 7px; }
.slide.content .section-head { background: #f4f4f7; padding: 8px 14px; font-size: 14px; color: #353a80; font-weight: 700; border-left: 4px solid #353a80; margin: 4px 0 8px; }
.slide.content .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.slide.content .ho-bullets { font-size: 16px; line-height: 1.85; color: #242424; }
.slide.content .ho-bullets li { padding-left: 24px; position: relative; margin-bottom: 8px; }
.slide.content .ho-bullets li::before { content: "▸"; position: absolute; left: 4px; color: #5b5fc7; font-weight: 700; }
.slide.content .ho-bullets li strong { color: #1a1a1a; }
.slide.content .conf-stamp { position: absolute; top: 22px; right: 30px; font-size: 11px; color: #888; letter-spacing: 0.08em; }
.slide.content .info-card { background: #fff; border: 1px solid #e1dfdd; border-left: 4px solid #5b5fc7; border-radius: 4px; padding: 14px 16px; margin-bottom: 10px; }
.slide.content .info-card.risk { border-left-color: #c4314b; }
.slide.content .info-card.warn { border-left-color: #f1c40f; }
.slide.content .info-card .tag { display: inline-block; padding: 1px 8px; background: #5b5fc7; color: #fff; font-size: 10px; font-weight: 700; border-radius: 3px; letter-spacing: 0.05em; margin-bottom: 4px; }
.slide.content .info-card.risk .tag { background: #c4314b; }
.slide.content .info-card.warn .tag { background: #b86a00; }
.slide.content .info-card h4 { font-size: 14px; color: #242424; margin-bottom: 4px; }
.slide.content .info-card p { font-size: 12px; color: #424242; line-height: 1.6; }


/* === mobile responsive (auto-injected) === */
@media (max-width: 768px) {
  body { -webkit-text-size-adjust: 100%; }
  .header { padding: 20px 16px 18px !important; }
  .header h1 { font-size: 22px !important; }
  .header h2 { font-size: 14px !important; }
  .header p { font-size: 12.5px !important; line-height: 1.65 !important; }
  .header .back { font-size: 12px !important; padding: 6px 12px !important; }
  .container { padding: 16px !important; max-width: 100% !important; }
  .legend { flex-wrap: wrap !important; gap: 8px !important; padding: 10px 12px !important; font-size: 12px !important; }
  .legend .sep { display: none !important; }
  .flow-section { padding: 14px !important; margin-bottom: 16px !important; }
  .flow-section h3 { font-size: 14px !important; flex-wrap: wrap !important; }
  /* お読みください card */
  .card { padding: 26px 20px !important; }
  .card h1 { font-size: 22px !important; }
  .card h2 { font-size: 14px !important; }
  .cta { padding: 14px 24px !important; font-size: 15px !important; }
  /* preview pages */
  .nav-bar { padding: 10px 14px !important; flex-wrap: wrap !important; gap: 6px !important; }
  .nav-bar .title { font-size: 12px !important; }
  .nav-bar .badge { font-size: 10px !important; }
  .content-wrap { padding: 16px !important; max-width: 100% !important; }
  /* artifacts catalog 2-col grid → 1-col */
  .grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .art .preview { min-height: auto !important; padding: 16px !important; }
  .art .info { padding: 16px !important; }
  /* 通しで見る two-col → stack */
  .layout { grid-template-columns: 1fr !important; height: auto !important; }
  html, body { overflow: visible !important; height: auto !important; }
  aside.toc { max-height: 200px; padding: 12px 0 16px !important; }
  aside.toc .brand { padding: 10px 16px 8px !important; font-size: 13px !important; }
  /* generic body wrap */
  body { padding-left: 0 !important; padding-right: 0 !important; }
  /* tables, code blocks scroll horizontally */
  pre, table { overflow-x: auto !important; max-width: 100% !important; }
}
/* === end mobile responsive === */