/* =============================================================================
   防災・防犯ページ
   Figma: node-id=60:1271 / 防災・防犯 PC
   ============================================================================= */

/* =============================================================================
   ページコンテンツ（2セクション共通コンテナ）
   ============================================================================= */

.page-content--disaster {
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
  width: 100%;
}

/* =============================================================================
   各セクション（防災対策 / 防犯対策）
   ============================================================================= */

.disaster-section {
  display: flex;
  flex-direction: column;
  gap: var(--margin-24);
  width: 100%;
}

/* =============================================================================
   箇条書きリスト
   ============================================================================= */

.disaster-list {
  display: flex;
  flex-direction: column;
  gap: var(--margin-16);
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* リストアイテム：丸ビュレット + テキスト横並び */
.disaster-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--margin-16);
}

/* 丸ビュレット（8px 黒丸）*/
.disaster-list__item::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 7px; /* テキスト行の中央に合わせる（line-height 1.3 × 18px ÷ 2 - 4px） */
  border-radius: 50%;
  background-color: var(--color-black);
}

/* リストアイテムのテキスト */
.disaster-list__text {
  font-size: var(--font-size-18);
  font-weight: normal;
  color: var(--color-black);
}

/* =============================================================================
   SP レスポンシブ（max-width: 1023px）
   ============================================================================= */

@media (max-width: 1023px) {
  /* セクション間 gap を --gap-main-area-top（32px）に合わせる */
  .page-content--disaster {
    gap: var(--gap-main-area-top);
  }
}