/* ------------------------------------------- */
/* 1. サイト全体 */
/* ------------------------------------------- */

body {
    margin: 0;
    padding-top: 70px; 
}


/* ------------------------------------------- */
/* 1. ナビゲーションバーのカスタムカラー設定 */
/* ------------------------------------------- */

/* ブランドロゴ部分の背景色 */
.custom-brand-bg {
    background-color: #5782A2 !important;
    color: #fff !important; 
}

/* ブランドロゴを最前面に */
.brand-logo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 35px;
  z-index: 1050; /* 最前面 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.custom-navbar-bg {
  position: fixed;
  top: 0; /* ロゴの高さ分ずらす */
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 1030;
  background-color: #f1d033 !important;
  display: flex;
  align-items: center;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* パンくずリストをさらに下に */
.breadcrumb-bg {
  position: fixed;
  top: 20px; /* ロゴ + ナビバーの高さ分 */
  left: 0;
  width: 100%;
  height:35px;
  margin:0 0 50px 0; 
  z-index: 1040;
  background-color: #fcf4d4;
  padding: 5px ;
  border-radius: 5px;
}

.breadcrumb-bg .breadcrumb-item {
  line-height: 1;
}

.breadcrumb-bg a {
  color: #5782A2;   /* 通常時の色 */
  text-decoration: none; /* 下線を消したい場合 */
}

.breadcrumb-bg a:hover {
  color: #f1d033;   /* ホバー時の色 */
}


/* ------------------------------------------- */
/* 1-1. PCサイズ (lg以上) での表示制御の設定 (オフキャンバス移行後は無効化推奨) */
/* ------------------------------------------- */

/* Offcanvasを使うため、この部分は今回は無視してOKだが、構造維持のため残す */
   @media (min-width: 992px) {
    .navbar-expand-lg .navbar-toggler {
        display: block !important;
    }
} 

/* ------------------------------------------- */
/* 1. パンくずリストの背景 */
/* ------------------------------------------- */

.breadcrumb-bg {
    /* 背景色：ブランドカラー（黄色 #f1d033）に近い、とても薄い黄色 */
    background-color: #fcf4d4; 
    
    /* 上下左右に余白を確保 */
    padding:10px 10px 1px; 
    width: 100%;
    
    /* 角丸にして柔らかい印象に */
    border-radius: 5px; 
    
    /* パンくずリスト自体のデフォルトの上下マージンをリセット */
    margin-top: 20px;
    margin-bottom: 0 !important; 
    box-sizing: border-box;
}


/* ------------------------------------------- */
/* 2. セクションの幅を制限する  */
/* ------------------------------------------- */
.update-list-section {
    /* 1. ボックスモデル・レイアウト */
    /* 例: 画面幅が広くても、このセクションは最大1200pxまでにする */
    max-width: 1330px; 

    /* 左右のmarginをautoにして、画面中央に配置する */
    margin-left: auto;
    margin-right: auto; 
    /* 上下の余白も調整 */
    padding: 75px 20px;
}

/* ページ全体のタイトル */
.section-title {
    color: #5782A2; /* ブランドカラー（青）で強調 */
    border-bottom: 3px solid #f1d033; /* ブランドカラー（黄色）で下線 */
    display: inline-block; /* 下線がテキスト幅に収まるように */
    padding-bottom: 5px;
}


/* ------------------------------------------- */
/* 2-1. グリッドコンテナ（一覧のレイアウト） */
/* ------------------------------------------- */
.card-grid {
    /* リストのデフォルトスタイルをリセット */
    list-style: none;
    padding: 0;
    margin: 0;

    /* Gridの定義：PCでは3列、タブレットでは2列、スマホでは1列にする */
    display: grid;
    /* gap: グリッドアイテム間の隙間を設定 */
    gap: 30px; 
    
    /* PCサイズのデフォルト設定 (3列) */
    grid-template-columns: repeat(3, 1fr);
}

/* ------------------------------------------- */
/* 2-2. レスポンシブ対応（ブレークポイントの設定） */
/* ------------------------------------------- */

/* タブレットサイズ (例: 768px未満) */
@media (max-width: 1024px) {
    .card-grid {
        /* 2列に変更 */
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* スマホサイズ (例: 600px未満) */
@media (max-width: 600px) {
    .card-grid {
        /* 1列に変更 */
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------- */
/* 2-3. カード本体と装飾（装飾） */
/* ------------------------------------------- */
.card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%; /* li要素内で高さを合わせる */
}

.card-content {
    /* ボックスモデル */
    height: 100%;
    padding: 20px;
    
    /* 背景と境界線 */
    background: #fff;
    border-radius: 8px; /* 角を丸くする */
    overflow: hidden; /* 画像が角からはみ出さないように */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 影を付けて浮き上がらせる */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* ホバー時のインタラクション */
.card-link:hover .card-content {
    transform: translateY(-5px); /* 少し上に動かしてクリック感を出す */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* 影を濃くする */
}

/* ------------------------------------------- */
/* 2-4.コンテンツのスタイル */
/* ------------------------------------------- */


.card-body {
    padding: 0; /* コンテンツ内の余白 */
}

.card-meta {
    /* 日付とカテゴリを横並びにする */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 0.85rem;
    color: #666;
}

.card-title {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.25rem;
    /* 文字スタイル */
    color: #333;
}

.card-excerpt {
    margin-top: 0;
    font-size: 0.95rem;
    color: #777;
}

/* カテゴリタグの装飾 */
.card-category {
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: bold;
    color: #fff;
}

.category-important {
    background-color: #f1d033; /* 黄系 */
}

.category-info {
    background-color: #5782A2; /* 青系 */
}

/* 他のカテゴリ色も必要に応じて追加 */
/* .category-maintenance { background-color: #f39c12; } */


/* ------------------------------------------- */
/* 3. サイトマップ / インデックスページ */
/* ------------------------------------------- */

/* サイトマップのコンテンツの Row のマージンをリセット */
.map-content-row {
    /* 左右のネガティブマージンを 0 に設定 */
    margin-left: 0 !important; 
    margin-right: 0 !important; 
    /* width を 100% に強制して、親要素の幅を超えないようにする */
    width: 100%;　
}

/* カードの基本設定 (境界線をブランドカラーに) */
.map-card-info, .map-card-content {
    margin-top: 10px;
    border-color: #5782A2 !important; /* 青い枠線 */
    /*
    以前の修正で残っていた height: %; は無効ですが、
    もし他の場所で height: 100%; などが設定されていたら、
    それを削除または auto に変更してください。
    今回は高さを自動調整 (auto) に設定します。
    */
    height: auto; 
}

/* 各セクションのタイトル (変更なし) */
.map-heading { 
    color: #5782A2; 
    border-bottom: 3px solid #f1d033;
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 1.5rem !important;
}


/* 右側コンテンツリンクのスタイル (変更なし) */
.content-link {
    font-size: 1.1rem;
    color: #5782A2;
    text-decoration: none;
    display: inline-block;
    padding: 5px 0;
    border-bottom: 1px dotted rgba(87, 130, 162, 0.5);
    transition: color 0.2s;
}

.content-link:hover {
    color: #f1d033;
    text-decoration: none;
}

/* 追加したテキストブロック用のスタイル */
.map-additional-text {
    /* 罫線はHTMLで border-top を使用しているため、ここでは不要 */
    line-height: 1.6;
}

/* モバイル時の調整 (左揃えを維持) */
@media (max-width: 767.98px) {
    /* カード内のテキストを左揃えに設定 (詳細度を上げてフッターの影響を排除) */
.map-card-content {
    text-align: left; 
}
    
ul.map-list-content {
    text-align: left;
  }
}



/* ------------------------------------------- */
/* 3. メインフッター */
/* ------------------------------------------- */

/* フッター全体の背景色と基本設定 */
.custom-footer {
    background-color: #f1d033 !important;
    color: #5782A2; /* 基本のテキストカラー */
}

/* リンクテキストの色 */
.custom-footer a {
    color: #5782A2 !important;
    transition: color 0.3s ease; /* 色の変化を滑らかに */
}

/* ホバー時のリンク色 */
.custom-footer a:hover {
    color: #ffffff !important; /* ホバーで白に変身！ */
}

/* 水平線（hrタグやborder）の色 */
.custom-footer .border-top {
    border-top: 1px solid #5782A2 !important; /* 空色のライン */
    opacity: 1; /* Bootstrapのデフォルトの透明度をリセット */
}

/* 見出しも空色 */
.custom-footer h4, 
.custom-footer h5 {
    color: #5782A2;
}

/* 著作権表記（一番下）のテキストカラー */
.custom-footer .copyright {
    color: #5782A2 !important;
    opacity: 0.8; /* ほんの少しだけ透けさせる */
}