/* 宇土市 広報うと 災害臨時号（uto-bulletin.html）
   紙面の色分けをそのまま持ち込み、章の見分けをつける。
   金額・日付・電話番号は探しやすさを優先して大きく置く。 */
:root{
  --ub-ink:#1f2d29; --ub-muted:#5d706a; --ub-line:#d5e0dc; --ub-paper:#fbfaf6;
  --ub-blue:#1a5b93; --ub-sky:#2d79a8; --ub-teal:#0f8a72; --ub-amber:#c9821b;
  --ub-green:#4f8f2f; --ub-orange:#d8552f; --ub-pink:#c2557f; --ub-purple:#6a5aa8;
}
.page-uto-bulletin main{background:#fff}
.bulletin-hero{padding:56px max(7vw,20px) 40px;background:linear-gradient(140deg,#eef6f3,#fffdf9 60%,#f6efe6);border-bottom:1px solid var(--ub-line)}
.bulletin-hero h1{margin:8px 0 16px;font-size:clamp(30px,4.6vw,50px);line-height:1.3;color:#123f38}
.bulletin-hero>p{max-width:820px;margin:0;color:#3f5d55;font-size:17px;line-height:1.9}
.bulletin-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.bulletin-hero-actions a{display:inline-flex;align-items:center;min-height:52px;padding:12px 18px;border:2px solid #1f5448;border-radius:9px;background:#fff;color:#1f5448;font-size:15px;font-weight:800;text-decoration:none}
.bulletin-hero-actions .bulletin-primary{background:#145e54;border-color:#145e54;color:#fff}
.bulletin-hero-actions a:hover{box-shadow:4px 4px 0 #dceae6}

.bulletin-alert{margin:0 max(7vw,20px) 34px}
.bulletin-alert-note{margin-top:8px!important;font-size:13px!important;color:#6b6045!important}

.bulletin-section{padding:0 max(7vw,20px) 64px}
.bulletin-section>h2{margin:0 0 14px;font-size:clamp(26px,3.7vw,38px);line-height:1.35;letter-spacing:.01em;color:#123f38}
.bulletin-lead{max-width:820px;margin:0 0 30px;color:#3f5d55;font-size:17px;line-height:2}

/* 章の見出しは紙面の色帯をなぞる */
.bulletin-head{display:flex;align-items:center;gap:14px;margin:0 0 26px!important;padding:16px 22px;border-radius:8px;color:#fff!important;font-size:clamp(23px,3.1vw,32px)!important;letter-spacing:.03em}
.bulletin-head.tone-blue{background:var(--ub-blue)}
.bulletin-head.tone-sky{background:var(--ub-sky)}
.bulletin-head.tone-teal{background:var(--ub-teal)}
.bulletin-head.tone-amber{background:var(--ub-amber)}
.bulletin-head.tone-green{background:var(--ub-green)}
.bulletin-head.tone-orange{background:var(--ub-orange)}
.bulletin-head.tone-pink{background:var(--ub-pink)}
.bulletin-head.tone-purple{background:var(--ub-purple)}

/* 期限 */
.bulletin-deadlines{padding-top:8px}
.deadline-list{display:grid;gap:14px;margin:0;padding:0;list-style:none;counter-reset:none}
.deadline-item{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:18px;align-items:start;padding:18px 20px;border:2px solid var(--ub-line);border-radius:11px;background:#fff}
.deadline-item.is-near{border-color:#d8552f;background:#fff7f3;box-shadow:5px 5px 0 #f6e0d6}
.deadline-date{display:block;color:#123f38;font-size:15px;font-weight:800;line-height:1.5;font-variant-numeric:tabular-nums}
.deadline-date>b{font-size:34px;line-height:1.1}
.deadline-date small{display:block;margin-top:2px;color:var(--ub-muted);font-size:13px;font-weight:700}
.deadline-item.is-near .deadline-date{color:#9a3413}
.deadline-item>div>b{display:block;margin-bottom:6px;font-size:18px;color:#123f38}
.deadline-item p{margin:0 0 8px;font-size:15px;line-height:1.85;color:#3f5d55}
.deadline-warn{color:#9a3413!important;font-weight:800}
.deadline-item a{display:inline-flex;align-items:center;min-height:44px;color:#0d766a;font-size:14px;font-weight:800}

/* 電話応答装置 */
.bulletin-phone{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;align-items:center;padding:22px;border:2px solid var(--ub-blue);border-radius:11px;background:#f3f8fc}
.bulletin-phone span{display:block;margin-bottom:5px;color:var(--ub-blue);font-size:13.5px;font-weight:900;letter-spacing:.06em}
.bulletin-phone b{display:block;font-size:17px;line-height:1.6;color:#123f38}
.bulletin-phone p{margin:8px 0 0;font-size:14px;line-height:1.8;color:#3f5d55}
.bulletin-phone-warn{color:#9a3413;font-weight:800}
.bulletin-note{margin:12px 0 0;font-size:14px;line-height:1.8;color:var(--ub-muted)}

.bulletin-tel{display:inline-flex;flex-direction:column;justify-content:center;min-height:68px;padding:12px 20px;border:2px solid #145e54;border-radius:9px;background:#145e54;color:#fff;font-size:24px;font-weight:900;text-decoration:none;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.bulletin-tel small{margin-bottom:2px;font-size:13.5px;font-weight:800;letter-spacing:.02em;opacity:.95}
.bulletin-tel:hover{background:#0f5147}
.bulletin-tel:focus-visible{outline:3px solid #e45e35;outline-offset:2px}
.bulletin-tel.is-small{min-height:44px;padding:7px 13px;font-size:17px;background:#fff;color:#0d5f55}
.bulletin-tel.is-small:hover{background:#edf7f4}
.bulletin-tel-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}

/* 章の目次 */
.bulletin-jump{display:block!important;margin:0 max(7vw,20px) 40px;padding:16px 18px;border:1px solid var(--ub-line);border-radius:9px;background:var(--ub-paper)}
.bulletin-jump>b{display:block;margin-bottom:10px;font-size:13.5px;color:#1f5448}
.bulletin-jump>div{display:flex;flex-wrap:wrap;gap:8px}
.bulletin-jump a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1.5px solid #cfdeda;border-radius:999px;background:#fff;color:#1f5448;font-size:14px;font-weight:800;text-decoration:none}
.bulletin-jump a:hover{border-color:#168174;background:#edf7f4}

/* 中身のカード */
.bulletin-card{margin:0 0 20px;padding:26px 28px;border:2px solid var(--ub-line);border-radius:11px;background:#fff}
.bulletin-card.is-caution{border-color:#e0b755;background:#fffbee}
.bulletin-card.is-warn{border-color:#dd8a6b;background:#fff6f2}
.bulletin-card.is-good{border-color:#8cc39a;background:#f4fbf5}
.bulletin-card.is-pending-card{border-style:dashed;background:var(--ub-paper)}
.bulletin-card h3{margin:0 0 16px;font-size:21.5px;line-height:1.5;letter-spacing:.01em;color:#123f38}
.bulletin-card>p{margin:0 0 15px;font-size:16.5px;line-height:2;color:#33443f}
.bulletin-card>p:last-child{margin-bottom:0}

.bulletin-facts{display:grid;gap:0;margin:0 0 18px}
.bulletin-facts>div{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:20px;padding:16px 0;border-top:1px solid var(--ub-line)}
.bulletin-facts>div:last-child{border-bottom:1px solid var(--ub-line)}
.bulletin-facts dt{color:#1f5448;font-size:14.5px;font-weight:800;line-height:1.7}
.bulletin-facts dt small{display:block;margin-top:3px;color:var(--ub-muted);font-size:13.5px;font-weight:700}
.bulletin-facts dd{margin:0;font-size:16.5px;line-height:1.95;color:#33443f}
.bulletin-amount{font-size:22px;color:#9a3413;font-variant-numeric:tabular-nums}

.bulletin-highlight{margin:12px 0 0;padding:13px 15px;border-left:5px solid #0d766a;border-radius:6px;background:#edf7f4;font-size:15px;line-height:1.85;color:#14453d;font-weight:700}
.bulletin-notes{margin:12px 0 0;padding-left:1.25rem;color:#4a5551;font-size:14px;line-height:1.85}
.bulletin-notes li{margin-bottom:4px}
.bulletin-check{display:grid;gap:8px;margin:0 0 12px;padding:0;list-style:none}
.bulletin-check li{position:relative;padding:11px 14px 11px 44px;border:1.5px solid #e0d5a8;border-radius:8px;background:#fff;font-size:15px;line-height:1.75}
.bulletin-check li::before{content:"✓";position:absolute;left:14px;top:11px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e0b755;color:#fff;font-size:12px;font-weight:900}
.bulletin-advice{margin:0 0 12px;padding-left:1.4rem;font-size:15.5px;line-height:1.9;color:#33443f}
.bulletin-advice li{margin-bottom:6px}

.bulletin-sub{margin:14px 0 0;padding:16px 18px;border:1.5px solid var(--ub-line);border-radius:9px;background:var(--ub-paper)}
.bulletin-sub>b{display:block;margin-bottom:8px;font-size:16.5px;color:#123f38}
.bulletin-sub>p{margin:0 0 10px;font-size:15px;line-height:1.85;color:#33443f}
.bulletin-sub.is-pending{border-style:dashed}
.bulletin-pending{margin:8px 0 0;padding:11px 14px;border-left:5px solid #a08a4a;border-radius:6px;background:#fdf8e9;font-size:14.5px;line-height:1.85;color:#5c4a10}
.bulletin-pending-list{display:grid;gap:12px;margin:12px 0 0;padding:0;list-style:none}
.bulletin-pending-list>li{padding:13px 15px;border:1.5px solid #e0d5a8;border-radius:8px;background:#fff}
.bulletin-pending-list>li>b{display:block;margin-bottom:7px;font-size:15.5px;line-height:1.6;color:#123f38}
.bulletin-pending-list span{display:block;margin-top:6px;font-size:14px;line-height:1.8;color:#4a5551}

.bulletin-inline-contact{margin:14px 0 0!important;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14.5px;font-weight:800;color:#1f5448}
.bulletin-inline-contact small{font-size:13px;font-weight:700;color:var(--ub-muted)}
.bulletin-contact{margin-top:16px;padding:18px 20px;border:2px solid #cfdeda;border-radius:11px;background:#f4f8f6}
.bulletin-contact>b{display:block;margin-bottom:4px;font-size:13.5px;font-weight:900;letter-spacing:.06em;color:#1f5448}
.bulletin-contact>p{margin:0 0 12px;font-size:16px;font-weight:800;color:#123f38}
.bulletin-contact>div{display:flex;flex-wrap:wrap;gap:9px}
.bulletin-related{display:inline-flex;align-items:center;min-height:44px;margin-top:14px;color:#0d766a;font-size:14px;font-weight:800}

/* 2列に割れると、中の「項目名｜内容」の内容側が70px程度しか残らず品目名が
   数文字ずつに折り返される。2列にするだけの幅があるときだけ2列にする。 */
.waste-facilities{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:14px}

@media(max-width:760px){
  .bulletin-hero{padding:38px 16px 30px}
  .bulletin-alert,.bulletin-jump{margin-inline:16px}
  .bulletin-section{padding-inline:16px}
  .deadline-item{grid-template-columns:1fr;gap:10px}
  .deadline-date b{font-size:30px}
  .bulletin-facts>div{grid-template-columns:1fr;gap:5px}
  .bulletin-card{padding:20px 18px}
  .waste-facilities{grid-template-columns:1fr}
  .bulletin-tel{font-size:21px}
}
@media print{
  .bulletin-hero-actions,.bulletin-jump,.bulletin-related,.timeline-links{display:none}
  .bulletin-card,.deadline-item{break-inside:avoid}
}

/* 宇土市の他ページからの相互リンク */
.bulletin-crosslink{display:inline-flex;align-items:center;min-height:52px;padding:12px 18px;border:2px solid #145e54;border-radius:9px;background:#145e54;color:#fff;font-size:15px;font-weight:800;text-decoration:none}
.bulletin-crosslink:hover{background:#0f5147;box-shadow:4px 4px 0 #dceae6}

/* 画面幅ではなくカードの実幅で判断する保険。狭いカードの中では項目名を上に置く */
.bulletin-card{container-type:inline-size}
@container (max-width:440px){.bulletin-facts>div{grid-template-columns:1fr;gap:5px}}

/* 絵は uto-waste.html と同じ語彙（線は currentColor、面は art-* の色）。
   装飾なので読み上げない。 */
.page-uto-bulletin svg{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.art-teal{fill:#2dd4bf;stroke:#0f766e}
.art-orange{fill:#fb923c;stroke:#c2410c}
.art-blue{fill:#93c5fd;stroke:#1d4ed8}
.art-yellow{fill:#fde047;stroke:#a16207}
.art-slate{fill:#cbd5e1;stroke:#475569}

/* 章の絵。大きく見せて、ひと目でどの話か分かるようにする */
.bulletin-art{display:grid;place-items:center;flex:0 0 auto;width:132px;height:96px;border-radius:11px;background:#fff;border:1.5px solid #dbe6e2}
.bulletin-art svg{width:112px;height:78px;color:#33443f}

/* 期限のカレンダー */
.deadline-art{display:grid;place-items:center;width:96px;height:70px;margin:0 0 10px;border-radius:9px;background:#fff;border:1.5px solid #e2ded1}
.deadline-art svg{width:82px;height:60px;color:#33443f}
.deadline-item.is-near .deadline-art{border-color:#eabfa9}

/* 項目の絵。見出しの左に置く */
h3.has-art,b.has-art{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center}
.bulletin-card-art{display:grid;place-items:center;width:96px;height:70px;border-radius:9px;background:#f7faf9;border:1.5px solid #e2e9e6}
.bulletin-card-art svg{width:84px;height:60px;color:#33443f}

/* 「こんなときに」— 被災者の状況からの言い換え。紙面の言葉ではないので、
   カードと違う見た目にして区別できるようにする */
.bulletin-situations{display:grid;grid-template-columns:132px minmax(0,1fr);gap:22px;align-items:center;margin:0 0 30px;padding:20px 22px;border-left:5px solid #7aa9a0;border-radius:0 10px 10px 0;background:#f2f7f6}
.bulletin-situations-body{display:grid;gap:9px}
.bulletin-situations b{color:#1f5448;font-size:13.5px;font-weight:900;letter-spacing:.04em}
.bulletin-situations ul{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.bulletin-situations li{padding:6px 12px;border:1.5px solid #cfdeda;border-radius:999px;background:#fff;color:#264a43;font-size:14.5px;line-height:1.7}
@media(max-width:760px){
  .bulletin-situations{grid-template-columns:104px minmax(0,1fr);gap:13px;padding:13px 14px}
  .bulletin-art{width:104px;height:78px}
  .bulletin-art svg{width:90px;height:64px}
  h3.has-art,b.has-art{grid-template-columns:76px minmax(0,1fr);gap:11px}
  .bulletin-card-art{width:76px;height:58px}
  .bulletin-card-art svg{width:66px;height:50px}
  .deadline-art{width:82px;height:60px}
  .deadline-art svg{width:70px;height:52px}
}
@media(max-width:430px){
  .bulletin-situations{grid-template-columns:1fr;justify-items:start}
}
@media print{.bulletin-situations{border-left-color:#999;background:#f6f6f6}}

/* 残り日数。紙面の日付から計算したもので、日付自体は書き換えない */
.deadline-badge{display:inline-block;margin-top:9px;padding:5px 12px;border-radius:999px;background:#eef3f0;color:#1f5448;font-size:13.5px;font-weight:900;letter-spacing:.02em}
.deadline-badge.is-soon{background:#d8552f;color:#fff}
.deadline-badge.is-today{background:#9a3413;color:#fff}
.deadline-badge.is-past{background:#5d6b66;color:#fff}
.deadline-item.is-past{border-color:#c3cbc8;background:#f4f5f4;box-shadow:none}
.deadline-item.is-past .deadline-date{color:#5d6b66}
.deadline-past-note{margin:10px 0 0!important;padding:11px 14px;border-left:5px solid #5d6b66;border-radius:6px;background:#eef0ef;color:#3c4744!important;font-size:14.5px!important;font-weight:800}

/* 一次情報の節。素のままだと画面いっぱいに小さな文字が並んで読みにくいので、
   ほかの節と同じ版面に収め、リンクは押せるカードにする */
.bulletin-sources{padding:0 max(7vw,20px) 56px}
.bulletin-sources-inner{padding:28px 30px 30px;border:2px solid #cfdeda;border-radius:14px;background:#f4f8f6;box-shadow:6px 6px 0 #e3ece9}
.bulletin-sources-head{display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;align-items:center;margin-bottom:24px}
.bulletin-sources-art{display:grid;place-items:center;width:120px;height:88px;border-radius:11px;background:#fff;border:1.5px solid #dbe6e2}
.bulletin-sources-art svg{width:100px;height:72px;color:#33443f}
.bulletin-sources-head h2{margin:0 0 8px!important;color:#123f38!important;font-size:clamp(20px,2.4vw,26px)!important;line-height:1.45}
.bulletin-sources-head p{margin:0!important;color:#3f544e!important;font-size:15.5px!important;line-height:1.9}

.bulletin-sources-label{margin:0 0 11px!important;padding-left:11px;border-left:5px solid #145e54;color:#123f38!important;font-size:14px!important;font-weight:900;letter-spacing:.06em}
.bulletin-sources-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-bottom:26px}
.bulletin-sources-grid a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;min-height:88px;padding:16px 18px;border:2px solid #cfdeda;border-radius:10px;background:#fff;color:#123f38;text-decoration:none}
.bulletin-sources-grid a:hover{border-color:#168174;background:#edf7f4;box-shadow:4px 4px 0 #dceae6}
.bulletin-sources-grid b{font-size:16px;line-height:1.55}
.bulletin-sources-grid small{grid-column:1;color:#5d706a;font-size:13px;line-height:1.6}
.bulletin-sources-grid i{grid-row:1/-1;grid-column:2;color:#0d766a;font-size:19px;font-style:normal;font-weight:900}

.bulletin-sources-related{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.bulletin-sources-related a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;padding:13px 17px;border:2px solid #145e54;border-radius:9px;background:#145e54;color:#fff;font-size:15px;font-weight:800;text-decoration:none}
.bulletin-sources-related a:hover{background:#0f5147;box-shadow:4px 4px 0 #dceae6}
.bulletin-sources-related i{font-style:normal;font-size:17px}

@media(max-width:760px){
  .bulletin-sources{padding-inline:16px}
  .bulletin-sources-inner{padding:20px 17px 22px}
  .bulletin-sources-head{grid-template-columns:92px minmax(0,1fr);gap:14px;margin-bottom:20px}
  .bulletin-sources-art{width:92px;height:70px}
  .bulletin-sources-art svg{width:78px;height:58px}
  .bulletin-sources-grid,.bulletin-sources-related{grid-template-columns:1fr}
}
@media(max-width:430px){.bulletin-sources-head{grid-template-columns:1fr;justify-items:start}}
@media print{.bulletin-sources-inner{border-color:#999;background:#fff;box-shadow:none}.bulletin-sources-related{display:none}}

/* ===== 章ごとの色分け =====
   紙面は章ごとに色が決まっている。ページでも見出しの帯だけでなく、
   節の地色・カードの縁・小見出しの帯まで同じ色を通して、どこからどこまでが
   同じ話か目で切り分けられるようにする。 */
.tone-blue  {--tone:#1a5b93;--tone-ink:#12405f;--tone-soft:#e8f1f8;--tone-wash:#f4f9fc;--tone-edge:#b6d0e4}
.tone-sky   {--tone:#2d79a8;--tone-ink:#1c5479;--tone-soft:#e9f3f9;--tone-wash:#f5fafd;--tone-edge:#b8d5e7}
.tone-teal  {--tone:#0f8a72;--tone-ink:#0a5f4f;--tone-soft:#e6f5f1;--tone-wash:#f4fbf9;--tone-edge:#aeddd1}
.tone-amber {--tone:#c9821b;--tone-ink:#8a5810;--tone-soft:#fdf3e2;--tone-wash:#fffaf1;--tone-edge:#eed6ab}
.tone-green {--tone:#4f8f2f;--tone-ink:#376520;--tone-soft:#eef6e8;--tone-wash:#f7fbf4;--tone-edge:#c8dfb8}
.tone-orange{--tone:#d8552f;--tone-ink:#993a1e;--tone-soft:#fdeee9;--tone-wash:#fff7f4;--tone-edge:#f2c5b5}
.tone-pink  {--tone:#c2557f;--tone-ink:#8a3a59;--tone-soft:#fbedf3;--tone-wash:#fff6fa;--tone-edge:#eec3d5}
.tone-purple{--tone:#6a5aa8;--tone-ink:#4a3e77;--tone-soft:#f0eefa;--tone-wash:#f8f7fd;--tone-edge:#cdc6ea}

/* 節ごとに薄い地色を敷いて、章の切れ目を見えるようにする */
.bulletin-section[class*="tone-"]{padding-top:46px;background:var(--tone-wash)}
.bulletin-section[class*="tone-"]+.bulletin-section[class*="tone-"]{border-top:1px solid var(--tone-edge)}

/* カードは白のまま（読みやすさ優先）。左に章の色の帯を入れて所属を示す */
.bulletin-section[class*="tone-"] .bulletin-card{border-color:var(--tone-edge);border-left:7px solid var(--tone);box-shadow:4px 4px 0 var(--tone-soft)}
/* 小見出しは章の色の帯にして、カードの中の区切りをはっきりさせる */
.bulletin-section[class*="tone-"] .bulletin-card>h3{margin:-26px -28px 20px;padding:15px 26px;border-radius:0;background:var(--tone-soft);color:var(--tone-ink);border-bottom:2px solid var(--tone-edge)}
.bulletin-section[class*="tone-"] .bulletin-card>h3.has-art{padding-block:10px}
/* 「こんなときに」も章の色に合わせる */
.bulletin-section[class*="tone-"] .bulletin-situations{border-left-color:var(--tone);background:var(--tone-soft)}
.bulletin-section[class*="tone-"] .bulletin-situations b{color:var(--tone-ink)}
.bulletin-section[class*="tone-"] .bulletin-situations li{border-color:var(--tone-edge)}
/* 項目の見出し（カード内の小分け）と、事実の表のラベル */
.bulletin-section[class*="tone-"] .bulletin-card b.has-art>span,
.bulletin-section[class*="tone-"] .bulletin-facts dt{color:var(--tone-ink)}
.bulletin-section[class*="tone-"] .bulletin-art{border-color:var(--tone-edge)}

@media(max-width:760px){
  .bulletin-section[class*="tone-"] .bulletin-card>h3{margin:-20px -18px 16px;padding:13px 17px}
}
@media print{
  .bulletin-section[class*="tone-"]{background:#fff}
  .bulletin-section[class*="tone-"] .bulletin-card{box-shadow:none}
}