/* 市町村の災害対策本部会議のまとめ（hq-kumamoto.html / hq-yatsushiro.html）
 *
 * 行政の資料をそのまま出すと文字の壁になる。関心事ごとに色を分け、余白と
 * 文字の大小で「まず読む数字」と「資料の原文」を見分けられるようにする。 */

.page-municipality-hq main {
  --hq-ink: #12312c;
  --hq-muted: #4c635e;
  --hq-line: #dde5e2;
  --hq-wash: #f4f8f6;
  --hq-paper: #fff;
  --tone: #0f766e;
  --tone-ink: #0b544e;
  --tone-soft: #e6f5f1;
  max-width: var(--org-content, 1180px);
  margin: 0 auto;
  padding: 0 20px 96px;
  color: var(--hq-ink);
}

/* 関心事ごとの色。ページ全体で同じ色が同じ話題を指す */
.page-municipality-hq .tone-shelter { --tone: #0f766e; --tone-ink: #0b544e; --tone-soft: #e6f5f1; }
.page-municipality-hq .tone-home { --tone: #b26a12; --tone-ink: #8a5210; --tone-soft: #fdf3e2; }
.page-municipality-hq .tone-lifeline { --tone: #1f6ea8; --tone-ink: #17557f; --tone-soft: #e9f3fa; }
.page-municipality-hq .tone-support { --tone: #4f8f2f; --tone-ink: #3d6f24; --tone-soft: #eef6e8; }
.page-municipality-hq .tone-people { --tone: #b2436c; --tone-ink: #8d3455; --tone-soft: #fbedf3; }
.page-municipality-hq .tone-city { --tone: #5f57a0; --tone-ink: #4a4380; --tone-soft: #f0eefa; }
.page-municipality-hq .tone-other { --tone: #5c6d68; --tone-ink: #44534f; --tone-soft: #eef1f0; }

/* ---- 見出し ------------------------------------------------------------- */
.hq-hero { padding: 44px 0 8px; }
.hq-hero .kicker { color: #0f766e; letter-spacing: .12em; font-size: 13px; font-weight: 700; margin: 0 0 12px; }
.hq-hero h1 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.22; margin: 0 0 18px; letter-spacing: -.01em; }
.hq-hero > p { font-size: 18px; line-height: 2; color: var(--hq-muted); max-width: 44em; margin: 0; }

.hq-range { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 28px 0 0; }
.hq-range div { background: var(--hq-wash); border: 1px solid var(--hq-line); border-radius: 14px; padding: 16px 18px; }
.hq-range b { display: block; font-size: 23px; line-height: 1.3; }
.hq-range span { display: block; font-size: 13.5px; color: var(--hq-muted); margin-top: 5px; }

/* ---- いまの状況 ---------------------------------------------------------- */
.hq-section { margin: 64px 0 0; }
.hq-section > h2 { font-size: clamp(23px, 3vw, 30px); margin: 0 0 10px; letter-spacing: -.01em; }
.hq-section > .hq-section-lead { margin: 0 0 24px; color: var(--hq-muted); font-size: 15.5px; line-height: 1.95; max-width: 46em; }

.hq-nows { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.hq-now { border: 1px solid var(--hq-line); border-left: 6px solid var(--tone); border-radius: 14px; padding: 24px 26px; background: var(--hq-paper); }
.hq-now h3 { font-size: 21px; line-height: 1.55; margin: 0 0 12px; color: var(--tone-ink); }
.hq-now p { margin: 0 0 10px; font-size: 16px; line-height: 1.95; }
.hq-now.is-wide { grid-column: 1 / -1; }
.hq-now-raw { background: var(--hq-wash); border-radius: 10px; padding: 6px 16px; }

/* 「停電：市内復旧済み」のようなラベルと内容の行を、読める表にする */
.hq-facts { margin: 0; display: grid; gap: 0; }
.hq-facts > div { display: grid; grid-template-columns: minmax(90px, 150px) 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--hq-line); }
.hq-facts > div:first-child { border-top: none; }
.hq-facts > div.is-note { grid-template-columns: 1fr; }
.hq-facts dt { font-size: 14px; font-weight: 700; color: var(--tone-ink); line-height: 1.8; }
.hq-facts dd { margin: 0; font-size: 15px; line-height: 1.9; }
.hq-facts > div.is-note dd { font-size: 14px; color: var(--hq-muted); }
.hq-now-note { font-size: 13.5px; color: var(--hq-muted); margin: 12px 0 0; }
.hq-bar { height: 12px; border-radius: 6px; background: var(--tone-soft); overflow: hidden; margin: 4px 0 14px; }
.hq-bar span { display: block; height: 100%; background: var(--tone); border-radius: 6px; }

/* ---- 発災からの行政対応／今後の動き ------------------------------------ */
.hq-overline { margin: 0 0 8px; color: #0f766e; font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.hq-story-section { padding: 30px; border-radius: 20px; background: linear-gradient(135deg, #f2f8f5, #fff); border: 1px solid var(--hq-line); }
.hq-phase-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hq-phase-list > li { position: relative; min-width: 0; }
.hq-phase-list > li:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 25px; left: calc(100% - 2px); width: 18px; border-top: 3px solid #9cc9bb; }
.hq-phase { position: relative; z-index: 1; height: 100%; padding: 20px 18px; border-radius: 14px; background: #fff; border: 1px solid #d6e5df; }
.hq-phase-number { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 50%; background: #0f766e; color: #fff; font-weight: 800; }
.hq-phase-date, .hq-phase-count { margin: 0 0 6px; color: var(--hq-muted); font-size: 12.5px; line-height: 1.6; }
.hq-phase h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.5; }
.hq-phase-body > p:not([class]) { margin: 0 0 12px; font-size: 14px; line-height: 1.8; }
.hq-phase-topics { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0; }
.hq-phase-topics span { padding: 3px 8px; border-radius: 999px; color: var(--tone-ink); background: var(--tone-soft); font-size: 11.5px; font-weight: 700; }
.hq-phase-metrics { border-top: 1px solid var(--hq-line); padding-top: 8px; display: grid; gap: 5px; }
.hq-phase-metrics span { font-size: 12px; line-height: 1.55; }
.hq-phase-metrics b { display: block; color: var(--hq-muted); font-weight: 500; }
.hq-reading-note { margin: 16px 0 0; color: var(--hq-muted); font-size: 12.5px; line-height: 1.8; }
.hq-direction-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hq-direction-card { border-radius: 16px; padding: 24px; border: 1px solid var(--hq-line); }
.hq-direction-card.is-official { background: #edf7f3; border-color: #b8d9cd; }
.hq-direction-card.is-reading { background: #faf7ef; border-color: #e7dcc0; }
.hq-direction-label { margin: 0 0 16px; font-size: 18px; font-weight: 800; }
.hq-direction-card ul { margin: 0; padding-left: 1.25em; display: grid; gap: 14px; }
.hq-direction-card li { font-size: 14.5px; line-height: 1.85; }
.hq-direction-card li p { margin: 0; }
.hq-direction-card a { display: inline-flex; min-height: 36px; align-items: center; color: #0f766e; font-size: 12.5px; font-weight: 700; }
.hq-direction-empty { margin: 0; font-size: 14.5px; line-height: 1.9; }

/* ---- 知りたいことから ---------------------------------------------------- */
.hq-theme-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.hq-theme-nav a {
  display: block; border: 2px solid var(--tone); border-radius: 14px;
  padding: 18px 20px; background: var(--tone-soft); text-decoration: none; min-height: 44px;
}
.hq-theme-nav a b { display: block; font-size: 17.5px; color: var(--tone-ink); margin-bottom: 6px; }
.hq-theme-nav a span { display: block; font-size: 14px; line-height: 1.8; color: var(--hq-muted); }
.hq-theme-nav a:hover, .hq-theme-nav a:focus-visible { background: var(--hq-paper); }

/* ---- 関心事ごと ---------------------------------------------------------- */
.hq-theme { margin: 40px 0 0; border-top: 3px solid var(--tone); padding-top: 24px; scroll-margin-top: 80px; }
.hq-theme-head h3 { font-size: 24px; margin: 0 0 6px; color: var(--tone-ink); }
.hq-theme-head p { margin: 0 0 22px; color: var(--hq-muted); font-size: 15px; line-height: 1.9; }

.hq-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-bottom: 22px; }
.hq-metric { border: 1px solid var(--hq-line); border-radius: 14px; padding: 20px; background: var(--hq-paper); }
.hq-metric.is-lead { background: var(--tone-soft); border-color: var(--tone); }
.hq-metric h4 { font-size: 14.5px; margin: 0 0 12px; color: var(--hq-muted); font-weight: 700; }
.hq-metric-latest { margin: 0; display: flex; align-items: baseline; gap: 5px; }
.hq-metric-latest b { font-size: 36px; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.hq-metric-latest small { font-size: 14px; color: var(--hq-muted); }
.hq-metric-when { margin: 6px 0 14px; font-size: 13px; color: var(--hq-muted); }

.hq-metric-range { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; font-size: 13px; }
.hq-metric-range dt { color: var(--hq-muted); margin: 0 0 3px; }
.hq-metric-range dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.hq-metric-range dd small { font-weight: 400; color: var(--hq-muted); }
.hq-metric-plain { margin: 14px 0 0; font-size: 13.5px; line-height: 1.85; color: var(--hq-ink); }
.hq-metric-note { margin: 10px 0 0; font-size: 13px; line-height: 1.8; color: var(--hq-muted); border-top: 1px solid var(--hq-line); padding-top: 10px; }

.hq-theme-latest > b { display: block; font-size: 14px; color: var(--tone-ink); margin-bottom: 12px; }

/* 資料の原文。説明と見分けられるよう地色を敷く */
.hq-block { border-left: 3px solid var(--tone-soft); padding: 0 0 0 16px; margin: 0 0 20px; }
.hq-block h4 { font-size: 16.5px; margin: 0 0 6px; color: var(--tone-ink); line-height: 1.6; }
.page-municipality-hq .hq-block-hint {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 12px;
  align-items: baseline;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-left: 3px solid var(--tone);
  border-radius: 0 8px 8px 0;
  background: var(--tone-soft);
  color: var(--hq-muted);
  font-size: 13px;
  line-height: 1.75;
}
.page-municipality-hq .hq-block-hint::before {
  content: "読み方の補足";
  color: var(--tone-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  white-space: nowrap;
}
.hq-block-text { margin: 0; font-size: 15.5px; line-height: 2.05; white-space: normal; }

/* ---- 時間の流れ ---------------------------------------------------------- */
.hq-sub { font-size: clamp(19px, 2.4vw, 23px); margin: 0 0 16px; }
.hq-charts { display: grid; gap: 20px; }
.hq-chart-card { border: 1px solid var(--hq-line); border-left: 6px solid var(--tone); border-radius: 14px; padding: 24px 26px; background: var(--hq-paper); }
.hq-chart-card h3 { font-size: 20px; margin: 0 0 10px; color: var(--tone-ink); }
.hq-chart-card > p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.95; }
/* 図は縮めない。狭い画面では箱ごと横に送る（縮めると軸の文字が読めなくなる） */
.hq-chart-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
.hq-chart { width: 100%; min-width: 860px; height: auto; display: block; overflow: visible; }
.hq-chart .hq-axis { font-size: 12px; fill: #5c716c; }
.hq-chart .hq-axis-day { font-size: 11px; fill: #8a9d99; }
.hq-chart .hq-axis-row { font-size: 12px; fill: #3d534e; font-weight: 700; }
.hq-chart-note { margin: 12px 0 0; font-size: 13.5px; line-height: 1.85; color: var(--hq-muted); }
.hq-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 12px; font-size: 14px; }
.hq-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hq-legend i { width: 16px; height: 3px; border-radius: 2px; }

.hq-cadence, .hq-topics { border: 1px solid var(--hq-line); border-radius: 14px; padding: 22px 24px; background: var(--hq-paper); }
.hq-cadence > p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.95; }

.hq-spans { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.hq-spans li { border-left: 4px solid var(--tone); background: var(--tone-soft); border-radius: 0 10px 10px 0; padding: 10px 14px; }
.hq-spans b { display: block; font-size: 15px; color: var(--tone-ink); }
.hq-spans span { display: block; font-size: 13.5px; color: var(--hq-muted); margin-top: 3px; line-height: 1.7; }

/* カード内の小さな推移も日付軸。線が途切れているところは会議のなかった日 */
.hq-mini { width: 100%; height: auto; display: block; margin: 0 0 14px; }

/* ---- 日ごとの変化 -------------------------------------------------------- */
.hq-changes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.hq-changes li { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid var(--hq-line); }
.hq-changes li:first-child { border-top: none; }
.hq-change-when b { display: block; font-size: 17px; }
.hq-change-when span { display: block; font-size: 13px; color: var(--hq-muted); margin-top: 3px; }
.hq-change-when i { display: inline-block; font-style: normal; font-size: 12.5px; margin-top: 6px; padding: 2px 8px; border-radius: 999px; background: #f0eefa; color: #4a4380; }
.hq-change-moved { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
/* 折り返した2行目が行頭に戻らないよう、印のぶんだけ下げる */
.hq-change-moved li { display: block; padding: 0 0 0 1.1em; text-indent: -1.1em; border: none; font-size: 15.5px; line-height: 1.85; }
.hq-change-moved li::before { content: "・"; color: #0f766e; font-weight: 700; }
.hq-change-fresh { margin: 12px 0 0; font-size: 14px; line-height: 1.9; }
.hq-change-fresh b { display: block; color: #b26a12; margin-bottom: 6px; }
.hq-change-fresh span { display: inline-block; background: #fdf3e2; border: 1px solid #ecd6a8; border-radius: 999px; padding: 4px 12px; margin: 0 6px 6px 0; font-size: 13.5px; }

/* ---- 言葉の説明 ---------------------------------------------------------- */
.hq-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.hq-term { border: 1px solid var(--hq-line); border-radius: 12px; background: var(--hq-paper); }
.hq-term > summary { padding: 14px 18px; cursor: pointer; min-height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.hq-term > summary::-webkit-details-marker { display: none; }
.hq-term > summary b { font-size: 16px; }
.hq-term > summary span { font-size: 13.5px; color: var(--hq-muted); line-height: 1.7; }
.hq-term[open] > summary { border-bottom: 1px solid var(--hq-line); }
.hq-term > div { padding: 16px 18px; }
.hq-term p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.95; }
.hq-term-diff { color: var(--hq-muted); }
.hq-term a { font-size: 14px; font-weight: 700; color: #0f766e; display: inline-flex; align-items: center; min-height: 44px; }

/* ---- 会議ごとの記録 ------------------------------------------------------ */
.hq-records { display: grid; gap: 10px; }
.hq-record { border: 1px solid var(--hq-line); border-radius: 14px; background: var(--hq-paper); }
.hq-record > summary { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 18px 20px; cursor: pointer; min-height: 44px; }
.hq-record > summary::-webkit-details-marker { display: none; }
.hq-record > summary b { font-size: 18px; }
.hq-record > summary span { font-size: 15.5px; }
.hq-record > summary i { font-style: normal; font-size: 13px; color: var(--hq-muted); }
.hq-record[open] > summary { border-bottom: 1px solid var(--hq-line); }
.hq-record-body { padding: 22px 24px 24px; }
.hq-record-venue { margin: 0 0 16px; font-size: 14px; color: var(--hq-muted); }

.hq-record-editorial {
  margin: 0 0 20px;
  padding: 16px 20px;
  border-left: 4px solid #0f766e;
  border-radius: 8px;
  background: #edf7f4;
}
.hq-record-editorial h4 {
  margin: 0 0 6px;
  color: #103f39;
  font-size: 16px;
  font-weight: 850;
}
.hq-record-editorial p {
  margin: 0;
  color: #3b544e;
  font-size: 14.5px;
  line-height: 1.85;
}

.hq-record-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0 0 24px; }
.hq-record-figures > div { background: var(--hq-wash); border-radius: 10px; padding: 12px 14px; }
.hq-record-figures dt { font-size: 13.5px; color: var(--hq-muted); margin-bottom: 3px; }
.hq-record-figures dd { margin: 0; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hq-record-figures dd small { font-size: 13px; font-weight: 400; color: var(--hq-muted); margin-left: 2px; }

.hq-record-theme { margin: 0 0 26px; }
.hq-record-theme > b { display: inline-block; font-size: 13.5px; color: #fff; background: var(--tone); border-radius: 999px; padding: 5px 14px; margin-bottom: 14px; }
.hq-record-empty, .hq-record-page { font-size: 13px; color: var(--hq-muted); margin: 0 0 12px; }
.hq-record-links { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 16px; }
.hq-record-links a { font-size: 14.5px; font-weight: 700; color: #0f766e; min-height: 44px; display: inline-flex; align-items: center; }

/* ---- 出典・作り方 -------------------------------------------------------- */
.hq-source { border: 2px solid #0f766e; border-radius: 14px; padding: 22px 24px; margin: 28px 0 0; background: var(--hq-paper); }
.hq-source b { display: block; font-size: 16px; color: #0f766e; margin-bottom: 8px; }
.hq-source p { margin: 0 0 10px; font-size: 15px; line-height: 1.9; }
.hq-source a { display: inline-flex; align-items: center; min-height: 44px; margin: 0 18px 4px 0; font-weight: 700; color: #0f766e; }

.hq-method { margin: 0; padding: 0 0 0 20px; }
.hq-method li { font-size: 14px; line-height: 1.95; color: var(--hq-muted); margin-bottom: 8px; }

.hq-other { margin: 48px 0 0; border-top: 1px solid var(--hq-line); padding-top: 22px; }
.hq-other b { display: block; font-size: 15px; margin-bottom: 6px; }
.hq-other a { display: inline-block; margin-right: 20px; font-weight: 700; color: #0f766e; min-height: 44px; line-height: 44px; }

.hq-empty { border: 1px dashed var(--hq-line); border-radius: 12px; padding: 20px; color: var(--hq-muted); }

@media (max-width: 720px) {
  .hq-hero { padding-top: 30px; }
  /* 幅が狭いと2段組みでは1行4文字ほどになり読めない。ラベルを上に置く */
  .hq-facts > div { grid-template-columns: 1fr; gap: 4px; }
  .hq-facts dt { color: var(--hq-muted); font-size: 13.5px; }
  .hq-metric-latest b { font-size: 30px; }
  .hq-now { padding: 20px; }
  .hq-story-section { padding: 22px 16px; }
  .hq-phase-list, .hq-direction-grid { grid-template-columns: 1fr; }
  .hq-phase-list > li:not(:last-child)::after { top: calc(100% - 2px); left: 32px; width: 0; height: 18px; border-top: 0; border-left: 3px solid #9cc9bb; }
  .page-municipality-hq .hq-block-hint { grid-template-columns: 1fr; gap: 3px; }
  .hq-changes li { grid-template-columns: 1fr; gap: 10px; }
  .hq-change-when { display: flex; align-items: baseline; gap: 10px; }
  .hq-change-when span { margin-top: 0; }
  .hq-record-body { padding: 18px; }
}
.hq-support-guide{display:flex;gap:16px;align-items:center;justify-content:center;padding:16px 24px;background:#e8f4f6;color:#173f4a}.hq-support-guide p{margin:0}.hq-support-guide a{padding:9px 13px;border-radius:8px;background:#245f7b;color:#fff;font-weight:800;text-decoration:none}@media(max-width:700px){.hq-support-guide{align-items:flex-start;flex-direction:column}}