/* =========================================================================
   小山市 地域創生DX事業 提案書 — Design System
   信頼感・誠実 / 紺・グレー基調 / 行政文書のための堅実なシステム
   ========================================================================= */

:root{
  /* --- Palette --- */
  --navy:      #15233F;   /* primary ink / dark surfaces */
  --navy-2:    #23386B;   /* secondary navy */
  --blue:      #2C6CB0;   /* accent / data primary */
  --blue-deep: #1E4E86;
  --blue-soft: #E7F0F8;
  --gold:      #AE863A;   /* warm accent, used sparingly */
  --gold-soft: #F2EAD7;

  --paper:     #FBFAF6;   /* main slide background */
  --panel:     #F3F1EA;   /* light panel */
  --panel-2:   #EBE7DC;   /* deeper panel */
  --line:      #DAD6CA;   /* hairlines */
  --line-2:    #C7C2B4;

  --text:      #283044;   /* body text on light */
  --text-2:    #666C7B;   /* muted */
  --text-3:    #9A9DA6;   /* faint */
  --on-navy:   #EDEFF4;   /* body text on navy */
  --on-navy-2: #9FACC6;   /* muted on navy */
  --white:     #FFFFFF;

  /* data series */
  --d1: #15233F;
  --d2: #2C6CB0;
  --d3: #AE863A;
  --d4: #9DB3CC;

  /* --- Type --- */
  --serif: "Noto Serif JP", serif;
  --sans:  "Noto Sans JP", sans-serif;
  --num:   "Outfit", "Noto Sans JP", sans-serif;
}

*{ box-sizing: border-box; }

deck-stage:not(:defined){ visibility: hidden; }
deck-stage{ background:#0c1322; }

section{
  font-family: var(--sans);
  background: var(--paper);
  color: var(--text);
  width: 1920px; height: 1080px;
  overflow: hidden;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  letter-spacing: .01em;
}

/* ---- shared frame ------------------------------------------------------ */
.slide{ position:absolute; inset:0; padding: 96px 132px 88px; display:flex; flex-direction:column; }
.slide.center{ justify-content:center; }

/* kicker / section header band */
.head{ display:flex; align-items:flex-end; gap:26px; margin-bottom:46px; }
.head .sec-no{
  font-family: var(--num); font-weight:600; font-size:30px; letter-spacing:.06em;
  color: var(--blue); line-height:1; padding-bottom:6px; white-space:nowrap;
}
.head .sec-no .bar{ display:inline-block; width:46px; height:3px; background:var(--gold); vertical-align:middle; margin-right:16px; }
.head h2{
  font-family: var(--serif); font-weight:700; font-size:58px; line-height:1.12;
  color: var(--navy); margin:0; letter-spacing:.005em;
}
.head .sub{ font-size:23px; color:var(--text-2); margin:0; line-height:1.5; font-weight:500; }

.kicker{
  font-family:var(--num); font-weight:600; font-size:22px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold);
}

/* footer */
.foot{
  position:absolute; left:132px; right:132px; bottom:46px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:18px; color:var(--text-3); letter-spacing:.04em;
}
.foot::before{ content:""; position:absolute; left:0; right:0; top:-22px; height:1px; background:var(--line); }
.foot .brand{ display:flex; align-items:center; gap:14px; font-weight:600; color:var(--text-2); white-space:nowrap; }
.foot .pg{ font-family:var(--num); font-weight:500; }

/* logo slot ------------------------------------------------------------- */
.logo-slot{
  display:inline-flex; align-items:center; justify-content:center;
  height:38px; min-width:120px; padding:0 18px; gap:10px;
  border:1px dashed var(--line-2); border-radius:6px;
  font-size:15px; color:var(--text-3); letter-spacing:.04em; background:rgba(255,255,255,.4);
}
.logo-slot.on-navy{ border-color:rgba(255,255,255,.28); color:var(--on-navy-2); background:transparent; }

/* ---- typographic helpers ---------------------------------------------- */
.lead{ font-size:30px; line-height:1.85; color:var(--text); font-weight:400; }
.lead strong{ color:var(--navy); font-weight:700; }
.body{ font-size:24px; line-height:1.9; color:var(--text); }
.muted{ color:var(--text-2); }

.quote{
  font-family:var(--serif); font-weight:600; font-size:46px; line-height:1.55;
  color:var(--navy); position:relative;
}
.quote .hl{ background:linear-gradient(transparent 62%, var(--gold-soft) 62%); padding:0 .08em; }

/* ---- panels & cards ---------------------------------------------------- */
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:14px; }
.card{ background:var(--white); border:1px solid var(--line); border-radius:16px; box-shadow:0 1px 0 rgba(21,35,63,.03); }

/* stat */
.stat .n{ font-family:var(--num); font-weight:600; color:var(--navy); line-height:.95; }
.stat .u{ font-family:var(--num); font-weight:500; font-size:.42em; color:var(--text-2); margin-left:.15em; }
.stat .lbl{ font-size:21px; color:var(--text-2); margin-top:10px; font-weight:500; }

/* tag / chip */
.chip{
  display:inline-flex; align-items:center; gap:9px; padding:8px 18px; border-radius:999px;
  font-size:19px; font-weight:600; letter-spacing:.02em; white-space:nowrap;
}
.chip.navy{ background:var(--navy); color:#fff; }
.chip.blue{ background:var(--blue-soft); color:var(--blue-deep); }
.chip.gold{ background:var(--gold-soft); color:var(--gold); }
.chip.ghost{ background:transparent; border:1px solid var(--line-2); color:var(--text-2); }

/* table */
table.t{ width:100%; border-collapse:collapse; font-size:22px; }
table.t th, table.t td{ text-align:left; padding:18px 22px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.t thead th{ background:var(--navy); color:#fff; font-weight:600; font-size:20px; letter-spacing:.03em; border-bottom:none; }
table.t thead th:first-child{ border-top-left-radius:10px; }
table.t thead th:last-child{ border-top-right-radius:10px; }
table.t tbody tr:nth-child(even){ background:rgba(243,241,234,.6); }
table.t .em{ color:var(--blue-deep); font-weight:700; }
table.t .num{ font-family:var(--num); font-weight:600; }

/* numbered list */
.nlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:22px; }
.nlist li{ display:flex; gap:22px; align-items:flex-start; }
.nlist .ix{
  flex:none; width:46px; height:46px; border-radius:50%; background:var(--navy); color:#fff;
  font-family:var(--num); font-weight:600; font-size:23px; display:flex; align-items:center; justify-content:center;
}
.nlist .tx{ font-size:24px; line-height:1.7; padding-top:5px; }
.nlist .tx b{ color:var(--navy); }

/* check list */
.clist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
.clist li{ display:flex; gap:16px; align-items:flex-start; font-size:23px; line-height:1.6; }
.clist .mk{ flex:none; margin-top:4px; color:var(--blue); }

/* ---- chart primitives -------------------------------------------------- */
.bar-track{ background:var(--panel-2); border-radius:8px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:8px; }

/* divider section (navy) */
.divider{ background:var(--navy); color:var(--on-navy); }
.divider h2{ color:#fff; }
.divider .big-no{
  font-family:var(--num); font-weight:600; font-size:200px; line-height:.8;
  color:rgba(255,255,255,.10); letter-spacing:-.02em;
}

/* reason number (はじめに) */
.rn{ flex:none; width:54px; height:54px; border-radius:14px; background:var(--gold-soft); color:var(--gold);
  font-family:var(--num); font-weight:700; font-size:28px; display:flex; align-items:center; justify-content:center; }

/* donut */
.donut{ width:340px; height:340px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.donut-hole{ width:226px; height:226px; border-radius:50%; background:var(--paper); display:flex; flex-direction:column;
  align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px var(--line); }

/* issue rows */
.issue{ display:flex; gap:24px; align-items:flex-start; background:var(--white); border:1px solid var(--line);
  border-radius:14px; padding:28px 34px; }
.issue .im{ flex:none; width:48px; height:48px; border-radius:50%; background:var(--navy); color:#fff;
  font-family:var(--num); font-weight:600; font-size:24px; display:flex; align-items:center; justify-content:center; }
.issue b{ display:block; font-size:26px; color:var(--navy); margin-bottom:7px; }
.issue p{ margin:0; font-size:21px; color:var(--text-2); line-height:1.6; }

/* funnel (predicament flow) */
.fnl{ flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:14px;
  padding:28px 26px; display:flex; flex-direction:column; gap:8px; }
.fnl.out{ background:rgba(174,134,58,.16); border-color:rgba(174,134,58,.4); }
.fnl .fn-i{ font-family:var(--num); font-weight:600; font-size:18px; color:var(--blue); letter-spacing:.06em; }
.fnl.out .fn-i{ color:var(--gold); }
.fnl b{ font-size:25px; color:#fff; }
.fnl span:last-child{ font-size:18px; color:var(--on-navy-2); }
.fn-ar{ flex:none; padding:0 18px; font-size:30px; color:rgba(255,255,255,.4); }

/* before / after */
.ba{ flex:1; align-self:stretch; border-radius:18px; padding:42px 46px; display:flex; flex-direction:column; gap:22px; }
.ba-before{ background:var(--panel); border:1px solid var(--line); }
.ba-after{ background:var(--navy); }
.ba-h{ font-family:var(--serif); font-weight:700; font-size:36px; color:var(--navy); }
.ba-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
.ba-list li{ font-size:23px; line-height:1.5; color:var(--text-2); padding-left:30px; position:relative; }
.ba-list li::before{ content:"×"; position:absolute; left:0; color:var(--line-2); font-weight:700; }
.ba-list.after li{ color:var(--on-navy); }
.ba-list.after li::before{ content:"✓"; color:var(--blue); }
.ba-list.after li b{ color:#fff; }
.ba-arrow{ flex:none; display:flex; align-items:center; }
.ba-arrow-c{ width:74px; height:74px; border-radius:50%; background:var(--gold-soft); color:var(--gold);
  font-size:40px; display:flex; align-items:center; justify-content:center; }

/* service cards */
.svc{ flex:1; background:var(--white); border:1px solid var(--line); border-radius:18px; padding:38px 36px;
  display:flex; flex-direction:column; }
.svc-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.svc-ic{ display:inline-flex; align-items:center; justify-content:center; min-width:64px; height:46px; padding:0 16px;
  border-radius:10px; background:var(--navy); color:#fff; font-weight:700; font-size:21px; letter-spacing:.02em; }
.svc:nth-child(2) .svc-ic{ background:var(--blue); }
.svc:nth-child(3) .svc-ic{ background:var(--gold); }
.svc-by{ font-size:16px; color:var(--text-3); font-weight:500; }
.svc h3{ font-family:var(--serif); font-weight:700; font-size:30px; color:var(--navy); margin:0 0 12px; }
.svc>p{ font-size:21px; color:var(--text-2); margin:0 0 22px; line-height:1.6; }
.svc-cl{ flex:1; }
.svc-cl li{ font-size:20px; line-height:1.5; align-items:flex-start; }
.svc-cl .mk{ font-size:13px; margin-top:7px; }
.svc-price{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; padding-top:24px; border-top:1px solid var(--line); }
.svc-price span{ font-size:20px; color:var(--text-2); background:var(--panel); border-radius:8px; padding:10px 18px; }
.svc-price b{ font-family:var(--num); font-size:24px; color:var(--navy); }

/* column bar chart */
.lg{ display:inline-flex; align-items:center; gap:8px; color:var(--text-2); white-space:nowrap; }
.lg i{ width:14px; height:14px; border-radius:3px; display:inline-block; }
.cbars{ display:flex; gap:54px; align-items:flex-end; justify-content:center; height:300px; padding-top:54px; }
.cbar{ width:150px; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; }
.cbar-fill{ width:100%; border-radius:12px 12px 0 0; position:relative; display:flex; align-items:flex-start; justify-content:center; min-height:48px; }
.cbar-fill span{ position:absolute; top:-44px; font-family:var(--num); font-weight:700; font-size:27px; color:var(--navy); white-space:nowrap; }
.cbar label{ margin-top:16px; font-size:20px; font-weight:600; color:var(--text-2); white-space:nowrap; }

/* price rows */
.pr{ display:flex; align-items:center; justify-content:space-between; padding:20px 0; border-bottom:1px solid var(--line); }
.pr:last-of-type{ border-bottom:none; }
.pr span{ font-size:22px; color:var(--text-2); }
.pr b{ font-family:var(--num); font-size:30px; color:var(--navy); }

/* kpi cards */
.kpi{ flex:1; background:var(--white); border:1px solid var(--line); border-radius:16px; padding:32px 32px; display:flex; flex-direction:column; }
.kpi-h{ display:flex; align-items:center; gap:18px; margin-bottom:24px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.kpi-t{ flex:none; width:54px; height:54px; border-radius:12px; background:var(--navy); color:#fff; font-family:var(--num); font-weight:700; font-size:30px; display:flex; align-items:center; justify-content:center; }
.kpi-h b{ display:block; font-size:25px; color:var(--navy); }
.kpi-h span{ font-size:18px; color:var(--text-2); white-space:nowrap; }
.kpi-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; }
.kpi-row span{ font-size:20px; color:var(--text-2); line-height:1.35; }
.kpi-row b{ flex:none; font-family:var(--num); font-weight:700; font-size:24px; color:var(--blue-deep); white-space:nowrap; }
.kpi-m{ margin:16px 0 0; font-size:16px; color:var(--text-3); line-height:1.5; }

/* merit columns */
.merit{ flex:1; background:var(--white); border:1px solid var(--line); border-radius:16px; padding:38px 36px; display:flex; flex-direction:column; }
.merit-n{ font-family:var(--num); font-weight:700; font-size:30px; color:var(--blue); }
.merit:nth-child(2) .merit-n{ color:var(--navy-2); }
.merit:nth-child(3) .merit-n{ color:var(--gold); }
.merit h3{ font-family:var(--serif); font-weight:700; font-size:29px; color:var(--navy); margin:14px 0 24px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.merit .clist li{ font-size:21px; line-height:1.5; align-items:flex-start; }
.merit .clist .mk{ font-size:12px; margin-top:8px; }

/* why rows (学生チーム) */
.why{ background:var(--white); border:1px solid var(--line); border-radius:14px; padding:24px 30px; flex:1; display:flex; flex-direction:column; justify-content:center; }
.why b{ font-size:25px; color:var(--navy); }
.why p{ margin:8px 0 0; font-size:20px; color:var(--text-2); line-height:1.55; }

/* fee rows */
.fee{ display:flex; align-items:center; gap:18px; padding:16px 0; border-bottom:1px solid var(--line); }
.fee:last-of-type{ border-bottom:none; }
.fee-t{ flex:none; width:44px; height:44px; border-radius:10px; background:var(--navy); color:#fff; font-family:var(--num); font-weight:700; font-size:24px; display:flex; align-items:center; justify-content:center; }
.fee-x b{ display:block; font-size:22px; color:var(--navy); }
.fee-x span{ font-size:20px; color:var(--text-2); }
.fee-x i{ font-style:normal; font-family:var(--num); font-weight:700; color:var(--blue-deep); }

/* risk rows */
.risk{ background:var(--white); border:1px solid var(--line); border-radius:14px; padding:26px 34px; display:flex; align-items:center; gap:40px; flex:1; }
.risk-l{ flex:none; width:520px; display:flex; align-items:center; gap:20px; }
.risk-i{ flex:none; width:46px; height:46px; border-radius:50%; background:var(--gold-soft); color:var(--gold); font-weight:700; font-size:28px; display:flex; align-items:center; justify-content:center; }
.risk-l b{ font-size:25px; color:var(--navy); line-height:1.3; }
.risk p{ margin:0; font-size:20px; color:var(--text-2); line-height:1.6; }

/* asks (連携) */
.ask{ flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:30px 32px; }
.ask-n{ font-family:var(--num); font-weight:600; font-size:22px; color:var(--blue); letter-spacing:.04em; }
.ask b{ display:block; font-size:26px; color:#fff; margin:12px 0 8px; }
.ask p{ margin:0; font-size:20px; color:var(--on-navy-2); line-height:1.5; }

/* roadmap */
.road{ position:relative; display:flex; gap:0; flex:1; align-items:center; padding:0 10px; }
.road-line{ position:absolute; left:60px; right:60px; top:50%; height:3px; background:var(--line); }
.ph{ flex:1; display:flex; flex-direction:column; align-items:center; gap:26px; position:relative; }
.ph-dot{ width:64px; height:64px; border-radius:50%; background:var(--navy); color:#fff; font-family:var(--num); font-weight:700; font-size:30px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 8px var(--paper); }
.ph-card{ background:var(--white); border:1px solid var(--line); border-radius:14px; padding:28px 30px; width:300px; text-align:center; }
.ph-when{ display:inline-block; font-family:var(--num); font-weight:600; font-size:18px; color:var(--blue-deep); background:var(--blue-soft); border-radius:999px; padding:5px 16px; margin-bottom:14px; white-space:nowrap; }
.ph-card b{ display:block; font-family:var(--serif); font-weight:700; font-size:27px; color:var(--navy); margin-bottom:10px; }
.ph-card p{ margin:0; font-size:19px; color:var(--text-2); line-height:1.55; }

/* members */
.mem{ display:flex; align-items:center; gap:20px; padding:18px 0; border-bottom:1px solid var(--line); }
.mem-av{ flex:none; width:58px; height:58px; border-radius:50%; background:var(--navy); color:#fff; font-family:var(--serif); font-weight:700; font-size:26px; display:flex; align-items:center; justify-content:center; }
.mem b{ display:block; font-size:25px; color:var(--navy); white-space:nowrap; }
.mem span{ font-size:19px; color:var(--text-2); }

/* info rows */
.info{ display:flex; gap:20px; padding:13px 0; border-bottom:1px dashed var(--line); font-size:20px; }
.info:last-child{ border-bottom:none; }
.info span{ flex:none; width:120px; color:var(--text-2); }
.info b{ color:var(--navy); font-weight:600; white-space:nowrap; }

/* contact */
.ct{ display:flex; flex-direction:column; gap:5px; font-size:22px; color:#fff; font-weight:500; }
.ct i{ font-style:normal; font-size:15px; color:var(--on-navy-2); letter-spacing:.1em; font-family:var(--num); font-weight:600; }

/* utilities */
.row{ display:flex; }
.col{ display:flex; flex-direction:column; }
.grow{ flex:1; }
.center-y{ align-items:center; }
.gap-s{ gap:18px; } .gap-m{ gap:34px; } .gap-l{ gap:56px; }
.note{ font-size:18px; color:var(--text-3); line-height:1.6; }

/* refined pull-quote (replaces left-accent panel) */
.quote-card{ position:relative; background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:50px 52px 46px; overflow:hidden; }
.quote-card .qc-mark{ position:absolute; top:-18px; right:30px; font-family:var(--serif); font-weight:700;
  font-size:170px; line-height:1; color:rgba(174,134,58,.16); pointer-events:none; }
.quote-card .quote{ position:relative; z-index:1; }

/* refined labeled note (replaces left-accent panel) */
.cnote{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:30px 40px; }
.cnote .cnote-label{ display:inline-flex; align-items:center; gap:11px; font-size:19px; font-weight:700;
  color:var(--navy); letter-spacing:.04em; margin-bottom:12px; }
.cnote .cnote-label::before{ content:""; width:9px; height:9px; background:var(--gold); transform:rotate(45deg); flex:none; }
.cnote p{ margin:0; }


/* ---- on-screen deck controls (rail toggle / present mode) -------------- */
.deck-controls{ position:fixed; top:20px; right:20px; z-index:9999; display:flex; gap:10px; }
.dc-btn{ display:inline-flex; align-items:center; gap:9px; height:46px; padding:0 20px; border-radius:999px;
  font-family:var(--sans); font-size:16px; font-weight:600; letter-spacing:.02em; cursor:pointer;
  border:1px solid rgba(255,255,255,.16); background:rgba(18,28,46,.74); color:#EDEFF4;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:background .15s, opacity .15s, transform .1s; }
.dc-btn:hover{ background:rgba(18,28,46,.94); }
.dc-btn:active{ transform:translateY(1px); }
.dc-btn svg{ width:19px; height:19px; flex:none; }
.dc-btn[aria-pressed="false"]{ opacity:.5; }
.dc-btn[aria-pressed="false"] .dc-on{ display:none; }
.dc-btn[aria-pressed="true"]  .dc-off{ display:none; }
.dc-btn.primary{ background:var(--blue); border-color:transparent; color:#fff; }
.dc-btn.primary:hover{ background:var(--blue-deep); }

#present-exit{ position:fixed; top:20px; right:20px; z-index:10000; display:none; opacity:.22; }
#present-exit:hover{ opacity:1; }
body.presenting .deck-controls{ display:none; }
body.presenting #present-exit{ display:inline-flex; }

@media print{ .deck-controls, #present-exit{ display:none !important; } }
@media (max-width:640px){ .deck-controls{ top:12px; right:12px; } .dc-btn span{ display:none; } .dc-btn{ padding:0 14px; } }