/* 1. 記事一つの塊 */
.report-simple-list .bs-blog-post__item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 45px 0 !important;
    border-bottom: 1px solid #ddd !important;
    list-style: none !important;
}

/* 2. 日付：一番上（青） */
.report-simple-list .bs-blog-post__item-date {
    order: 1 !important;
    color: #284a94 !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    margin-bottom: 12px !important;
    display: block !important;
}

/* 3. カテゴリ：青背景・白文字（塗りつぶし） */
.report-simple-list .bs-blog-post__item-category {
    order: 2 !important;
    display: inline-block !important;
    background-color: #284a94 !important; /* 背景はテーマの青 */
    color: #ffffff !important;      /* 文字は白 */
    font-size: 0.8rem !important;
    padding: 4px 16px !important;
    border-radius: 4px !important;
    margin-bottom: 20px !important;
    text-decoration: none !important; 
}

.report-simple-list .bs-blog-post__item-category:hover {
    opacity: 0.8 !important;         /* ホバー時は少し透かして反応を見せる */
    color: #ffffff !important;
}

.report-simple-list .bs-blog-post__item-category a {
    color: #ffffff !important;      /* 文字は白 */
    background-color: #284a94 !important; /* 背景はテーマの青 */
    border: 2px solid #284a94 !important; /* 枠も青にしてサイズ感を確保 */
    font-size: 0.8rem !important;
    padding: 4px 16px !important;
    border-radius: 4px !important;
    text-decoration: none !important; 
    font-weight: bold !important;
    transition: opacity 0.3s;
}

.report-simple-list .bs-blog-post__item-category a:hover {
    opacity: 0.8 !important;         /* ホバー時は少し透かして反応を見せる */
    color: #ffffff !important;
}

/* 4. タイトル：デカタイトル・下線なし */
.report-simple-list .bs-blog-post__item-title {
    order: 3 !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

.report-simple-list .bs-blog-post__item-title a {
    color: #333 !important;
    text-decoration: none !important;
}

.report-simple-list .bs-blog-post__item-title a:hover {
    color: #284a94 !important;
    text-decoration: none !important;
}

/* 5. 不要な要素の徹底排除 */
.report-simple-list .bs-blog-title,
.report-simple-list .bs-blog-post__item-detail,
.report-simple-list .bs-top-post__item-detail,
.report-simple-list .bs-blog-post__item-eye-catch,
.report-simple-list .bs-blog-category-title,
.report-simple-list .bs-blog-post-title,
.report-simple-list .bs-single-post__meta-category,
.report-simple-list .bs-single-post__meta-date {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hero-simple {
    margin-top: 0 !important;
}

.hero-cat-label {
    display: inline-block;
    border: 1px solid #fff;
    padding: 2px 15px;
    border-radius: 4px;
    font-size: 0.9rem;
    color: #fff !important;
    text-decoration: none;
    transition: all 0.3s ease; /* ふわっと変化させる設定 */
}

/* ホバー時の見た目（色が反転する） */
.hero-cat-label:hover {
    background-color: #fff;   /* 背景を白に */
    color: #284a94 !important; /* 文字を青に */
    text-decoration: none;
}







/* 1. 外枠：clearfixなどの古い設定をリセット */
div.bs-blog-contents-navi.clearfix {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 50px 0 !important;
    padding: 20px 0 !important;
    border-top: 1px solid #eee !important;
    float: none !important; /* floatを解除 */
    overflow: visible !important;
}

/* 2. aタグ本体：全ての装飾を上書き */
div.bs-blog-contents-navi.clearfix a.prev-link,
div.bs-blog-contents-navi.clearfix a.next-link {
    /* 配置のリセット */
    float: none !important; 
    display: inline-block !important;
    
    /* デザイン：白地に青枠 */
    background-color: #fff !important;
    color: #284a94 !important;
    border: 2px solid #284a94 !important;
    
    /* サイズと余白 */
    padding: 12px 25px !important;
    min-width: 180px !important;
    text-align: center !important;
    
    /* フォントと角丸 */
    font-weight: 800 !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    
    /* アニメーション */
    transition: all 0.3s ease !important;
}

/* 3. ホバー：青地に白文字へ反転 */
div.bs-blog-contents-navi.clearfix a.prev-link:hover,
div.bs-blog-contents-navi.clearfix a.next-link:hover {
    background-color: #284a94 !important;
    color: #fff !important;
    text-decoration: none !important;
    transform: translateY(-2px); /* ちょこっと浮かす */
    box-shadow: 0 5px 15px rgba(40, 74, 148, 0.2) !important;
}

/* --- スマホ・タブレット対応（画面幅が800px以下の時） --- */
@media screen and (max-width: 800px) {
    
    /* 1. 外枠を「横並び」から「縦並び」に変える */
    div.bs-blog-contents-navi.clearfix {
        flex-direction: column !important; /* 上下並びにする */
        gap: 15px !important;            /* ボタン同士の間隔 */
        padding: 30px 0 !important;
    }

    /* 2. ボタンを画面幅いっぱい（100%）にする */
    div.bs-blog-contents-navi.clearfix a.prev-link,
    div.bs-blog-contents-navi.clearfix a.next-link {
        width: 100% !important;        /* 横幅いっぱい */
        min-width: unset !important;   /* PC用の幅指定を解除 */
        box-sizing: border-box !important;
        padding: 15px 10px !important; /* 少し厚みを持たせて押しやすく */
        font-size: 0.95rem !important; /* 文字が長すぎても収まりやすく */
    }

    /* 3. 「前へ」の記号が邪魔なら、少し調整 */
    div.bs-blog-contents-navi.clearfix a.prev-link::before {
        margin-right: 5px;
    }
}

/* カテゴリナビゲーションの外枠 */
.category-filter-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
    list-style: none;
    padding: 0;
}

/* 各カテゴリボタン */
.category-filter-nav a {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid #284a94;
    border-radius: 20px; /* 丸みのあるチップ形式 */
    color: #284a94;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s;
}

/* マウスを乗せた時 or 現在選択中のカテゴリ */
.category-filter-nav a:hover,
.category-filter-nav a.current {
    background-color: #284a94;
    color: #fff;
}

/* フィルタリングボタンの基本形 */
.filter-btn {
    display: inline-block;
    padding: 8px 18px;
    border: 2px solid #284a94;
    border-radius: 30px;
    background: #fff;
    color: #284a94;
    font-size: 0.9rem;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* ホバー時と「今選んでいるカテゴリ」の見た目 */
.filter-btn:hover,
.filter-btn.current {
    background-color: #284a94 !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(40, 74, 148, 0.2);
}

/* スマホでボタンが多くなったら横に流せるようにする */
@media screen and (max-width: 600px) {
    .category-filter-nav {
        justify-content: flex-start !important;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
    }
    .category-filter-nav li {
        flex: 0 0 auto;
    }
}

/* 1. 全体の背景を白、枠線を青にする */
.bs-pagination {
    background-color: #fff; /* 白背景 */
    border: 2px solid #0044cc; /* 青い枠線（太さや色は調整してください） */
    border-radius: 8px; /* 角を少し丸く */
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 40px auto;
    max-width: fit-content; /* 中身に合わせて横幅を調整 */
}

/* 2. 数字や「前へ・次へ」の共通ボタンデザイン */
.bs-pagination__number a, 
.bs-pagination__number span,
.bs-pagination__prev a,
.bs-pagination__next a {
    display: inline-block;
    padding: 8px 14px;
    text-decoration: none;
    color: #0044cc; /* 文字を青に */
    font-weight: bold;
    transition: 0.3s;
}

/* 3. 現在表示しているページ（青背景に白文字） */
.bs-pagination .current {
    background-color: #0044cc; /* 青背景 */
    color: #ffffff !important; /* 白文字 */
    
    /* 丸の大きさを調整（ここをお好みのサイズに変えてください） */
    width: 40px;               
    height: 40px;
    
    /* 正円にする設定 */
    border-radius: 50% !important; 
    
    /* 数字を真ん中に配置するための設定 */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    
    /* 前後の数字とのバランス調整 */
    line-height: 1;
    margin: 0 4px;
    vertical-align: middle;
}

/* 4. マウスを乗せたとき（ホバー） */
.bs-pagination__number a:hover,
.bs-pagination__prev a:hover,
.bs-pagination__next a:hover {
    background-color: #e6f0ff; /* 薄い青 */
    border-radius: 4px;
}

/* 5. 無効なボタン（「前へ」がない時など）の色を薄くする */
.bs-pagination .disabled {
    color: #ccc;
    cursor: not-allowed;
}

/* 元々あったページネーションを隠す（必要であれば） */
.report-simple-list > .bs-pagination:not(.custom-navigation) {
    display: none !important;
}

/* 1. 全体のリスト形式を横並びにする（・を消す） */
.custom-navigation {
    display: flex !important;      /* 横並びにする */
    justify-content: center !important; /* ★左右中央に寄せる */
    align-items: center !important;     /* 上下中央に寄せる */
    list-style: none !important;   /* 「・」を消す */
    padding: 0 !important;
    margin: 40px auto !important;  /* 上下に余白、左右は自動で真ん中 */
    width: 100%;                   /* 横幅いっぱい使って中央配置 */
    gap: 10px;                     /* ボタン同士の間隔 */
}

/* 2. すべてのボタン（最初・最後・数字・前次）の共通設定 */
.custom-navigation li a,
.custom-navigation li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #0044cc; /* 文字は青 */
    font-weight: bold;
    padding: 8px 12px;
    transition: 0.3s;
}

/* 3. 現在のページの「大きな青い丸」 */
.custom-navigation .current {
    background-color: #0044cc !important;
    color: #ffffff !important;
    width: 48px; /* 丸のサイズ */
    height: 48px;
    border-radius: 50% !important;
    font-size: 1.2rem;
}

/* 4. マウスを乗せた時の背景（薄い青） */
.custom-navigation li a:hover {
    background-color: #e6f0ff;
    border-radius: 4px;
}

/* 5. 「最初」「最後」の文字も青くする（aタグを狙い撃ち） */
.custom-navigation .first a,
.custom-navigation .last a {
    color: #0044cc !important;
}

/* 6. 押せない状態のボタンを薄くする */
.custom-navigation .disabled {
    color: #ccc !important;
    cursor: not-allowed;
}

/* --- スマホ用の調整（画面幅が768px以下のとき） --- */
@media screen and (max-width: 768px) {
    .custom-navigation {
        flex-wrap: wrap;       /* 入りきらないボタンを次の行に落とす */
        gap: 5px;             /* ボタン同士の隙間を少し詰める */
        padding: 10px;        /* 左右の余白を調整 */
    }

    /* 1. スマホでは青い丸を少し小さくする（48px → 38pxくらい） */
    .custom-navigation .current {
        width: 38px !important;
        height: 38px !important;
        font-size: 1rem;      /* 数字も少し小さく */
    }

    /* 2. 他の数字や「最初・最後」のボタンもサイズ調整 */
    .custom-navigation li a,
    .custom-navigation li span {
        padding: 6px 8px;     /* ボタンの余白を削る */
        font-size: 0.8rem;    /* 文字を少し小さく */
        min-width: 35px;      /* 最低限の幅を確保 */
    }
    
    /* 3. 「最初」「最後」などの文字が長すぎるなら少し詰める */
    .custom-navigation .first a, 
    .custom-navigation .last a,
    .custom-navigation .prev a, 
    .custom-navigation .next a {
        padding: 5px;
    }
}