hp-archive: 市民向けの情報をアイコンと色で見やすく

1 files changed, 79 insertions, 0 deletions

diff --git a/src/styles/custom.css b/src/styles/custom.css
index ef3bbb7..2dfac9c 100644
--- a/src/styles/custom.css
+++ b/src/styles/custom.css
@@ -221,6 +221,85 @@
   color: var(--sl-color-text, inherit);
 }
 
+/* ── 市民がよく使う情報のカード（アプリ・緊急時の情報）── */
+.info-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
+  gap: 0.7rem;
+  margin: 1rem 0;
+}
+.info-card {
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-start;
+  margin: 0;
+  padding: 0.85rem 1rem;
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 10px;
+  background: var(--sl-color-bg-sidebar, transparent);
+}
+.info-card--alert {
+  border-color: var(--sl-color-orange-high, #b95000);
+}
+.info-card-icon {
+  flex: none;
+  margin: 0;
+  font-size: 1.6rem;
+  line-height: 1.1;
+}
+.info-card > div {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.info-card > div > p {
+  margin: 0.3rem 0 0;
+  font-size: 0.9rem;
+  text-align: left;
+}
+.info-card > div > p:first-child {
+  margin-top: 0;
+  font-size: 0.95rem;
+}
+.info-card-links a {
+  font-weight: 700;
+}
+
+/* ── 代表電話などの案内ボックス ── */
+.info-callout {
+  display: flex;
+  gap: 0.85rem;
+  align-items: center;
+  margin: 1rem 0;
+  padding: 0.9rem 1.1rem;
+  border: 2px solid var(--sl-color-accent);
+  border-radius: 10px;
+  background: var(--sl-color-accent-low);
+}
+.info-callout-icon {
+  flex: none;
+  margin: 0;
+  font-size: 1.8rem;
+  line-height: 1;
+}
+.info-callout-body p {
+  margin: 0;
+  text-align: left;
+}
+.info-callout-label {
+  font-size: 0.82rem;
+  opacity: 0.85;
+}
+.info-callout .info-callout-tel {
+  font-size: 1.4rem;
+  font-weight: 800;
+  letter-spacing: 0.02em;
+  line-height: 1.2;
+}
+.info-callout-body .info-callout-note {
+  margin-top: 0.35rem;
+  font-size: 0.85rem;
+}
+
 /* Tables inside bubbles */
 .bln table {
   display: table !important;