/* ================================= */
/* ============ 共通カラー ========== */
/* ================================= */
:root {
  --maincolor: #2A9D8F;
  --subcolor: #F4F4F4;
  --accentcolor: #F4A261;
}

.maincolor { background-color: var(--maincolor); }
.subcolor  { background-color: var(--subcolor); }
.accentcolor { background-color: var(--accentcolor); }

body {
  font-family: "Inter", system-ui, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

/* ================================= */
/* ============ レイアウト ========== */
/* ================================= */
/* ページ全体を縦に並べ、最下部にフッターを配置 */
html, body {
  min-height: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.page-main {
  flex: 1 0 auto;
  background-color: var(--maincolor);
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

/* 各セクションのカード（PCでは画面幅に応じて拡大、最大1140px・最大92%） */
.section-card {
  width: min(92%, 1140px);
  margin: 0.75rem auto;
  padding: 1rem 1.25rem;
  background-color: var(--subcolor);
  border-radius: 30px;
}
.detail-card {
  width: min(92%, 1140px);
  margin: 0.75rem auto;
  padding: 1rem 1.25rem;
  background-color: var(--subcolor);
  border-radius: 10px;
}

/* ================================= */
/* ============ ヘッダー ============ */
/* ================================= */
.header-item-bg {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: linear-gradient(45deg, #F4F4F4 0%, #FFFFFF 100%); /* サブカラー */
  color: #000;
  border: 2px solid #ffffff;
  border-radius: 50px;
  padding: 8px 16px;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
  box-shadow: 4px 6px 8px rgba(0, 0, 0, 0.3);
}
.header-item-bg:hover {
  background: linear-gradient(180deg, #F4A261 0%, #F4A261 50%);
  color: #333;
  text-decoration: none;
  box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.4);
}
.navbar-brand { font-size: 28px; }

/* ================================= */
/* ============ 新着情報 ============ */
/* ================================= */
.news-scroll {
  max-height: 350px;
  overflow-y: auto;
  padding-bottom: 10px;
}
.news-card { background: #f5f5dc; }

/* ================================= */
/* ======== バス横断アニメ ========= */
/* (framer-motion BusMotion の CSS 再現) */
/* ================================= */
.bus-motion {
  position: relative;
  width: 100%;
  height: 8rem;
  overflow: hidden;
  background-color: #cfe2ff; /* bg-blue-100 相当 */
  display: flex;
  align-items: center;
  border-radius: 10px;
}
.bus-motion .bus-icon {
  position: absolute;
  font-size: 2.5rem;
  color: #2563eb; /* text-blue-600 相当 */
  animation: bus-run 5s ease-in-out infinite;
}
@keyframes bus-run {
  0%   { left: -2%; }
  100% { left: 102%; }
}

/* セクション見出し */
.section-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

/* 安全への取り組み: バナー画像ボタン */
.activity-banner {
  border: 1px solid #dee2e6;
  border-radius: 10px;
  padding: 1rem;
  width: 350px;
  max-width: 100%;
}
.activity-banner img { display: block; margin: 0 auto; max-width: 100%; height: auto; }