/* =========================================
   emergency.css
   緊急情報・警報専用スタイル
   （横須賀市・葉山町消防指令センター用）
========================================= */

/* JS が挿し込むプレースホルダ自体は余白だけ調整 */
#urgent-placeholder {
  margin: 0;
}

/* ▼ 緊急情報エリア全体（帯） --------------------- */
#urgent-area {
  /* 画面上部に張り付ける */
  position: sticky;           /* 常に上に出したいなら fixed に変更 */
  top: 0;
  z-index: 1000;

  width: 100%;
  box-sizing: border-box;

  background-color: #b30000;  /* 消防っぽい赤 */
  color: #ffffff;
  padding: 8px 16px;

  font-family: "Meiryo", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  border-bottom: 3px solid #7a0000;
}

/* 見出し（【緊急のお知らせ】） */
#urgent-area h2 {
  font-size: 1.3rem;
  margin: 0 0 4px;
  font-weight: 700;
}

/* メッセージ本文（林野火災警報など） */
#urgent-message {
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 0;
}

/* 将来、複数の行を入れたときにも少し余白を持たせる */
#urgent-message p {
  margin: 0 0 4px;
}

/* ▼ 非表示にしたい場合に備えたクラス（JS側で使う用） */
#urgent-area.hidden {
  display: none !important;
}

/* =========================================
   スマホ用（幅600px以下）
========================================= */
@media (max-width: 600px) {
  #urgent-area {
    padding: 8px 14px;
  }

  #urgent-area h2 {
    font-size: 1.4rem;
    margin-bottom: 4px;
  }

  #urgent-message {
    font-size: 1.4rem;
    line-height: 1.3;
  }
}

/* =========================================
   タブレット用（幅900px以下）
========================================= */
@media (max-width: 900px) {
  #urgent-area {
    padding-left: 12px;
    padding-right: 12px;
  }
}
/* =========================================
   デフォルトメッセージ（注意報なし）の場合のデザイン
========================================= */
#urgent-area.no-alert {
  background-color: #ffffff !important; /* 白背景 */
  color: #000000 !important;            /* 全体の文字色を黒に */
  border-bottom: 2px solid #cccccc;     /* 灰色の線（任意） */
}

#urgent-area.no-alert h2 {
  color: #000000 !important;
}

#urgent-area.no-alert #urgent-message {
  color: #000000 !important;
}