@charset "utf-8";

/*---- news ----*/

/* 全体の背景（淡いブルー） */
.news-wrapper {
    background-color: #E8E9E8;
    padding: 30px;
    margin-bottom: 2rem;
    border-radius: 4px;
}

/* プルダウンのコンテナ */
.news-filter {
    position: relative;
    margin-bottom: 20px;
    width: 250px; /* ボタンの幅 */
}

/* プルダウンを開くボタン */
.filter-dropdown-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 12px 20px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 15px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.filter-dropdown-btn .arrow {
    font-size: 12px;
    color: #888;
}

/* プルダウンメニューの一覧（初期状態は非表示） */
.filter-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    list-style: none;
    padding: 0;
    margin: 5px 0 0 0;
    z-index: 10;
    display: none; /* jQueryでクラスが付与されたら表示 */
}

/* 'open' クラスが付与されたらメニューを表示する */
.news-filter.open .filter-dropdown-menu {
    display: block;
}

/* プルダウン内の各項目 */
.filter-dropdown-menu li {
    padding: 12px 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    color: #555;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
}

.filter-dropdown-menu li:last-child {
    border-bottom: none;
}

/* プルダウン内でのカテゴリ色分け（左端の線で表現） */
.filter-dropdown-menu li.cate0 { border-left: 4px solid #EEA9A9; }/*すべて*/
.filter-dropdown-menu li.cate1 { border-left: 4px solid #FCFAAC; }/*津島中央病院*/
.filter-dropdown-menu li.cate2 { border-left: 4px solid #8CD9CD; }/*老人保健施設 第一アメニティつしま*/
.filter-dropdown-menu li.cate3 { border-left: 4px solid #A9C2EE; }/*介護老人保健施設 パビリオン*/
.filter-dropdown-menu li.cate4 { border-left: 4px solid #F5CDA9; }/*グループホーム ぬくもり*/
.filter-dropdown-menu li.cate5 { border-left: 4px solid #D4A9EE; }/*グループホーム ふるかわ*/
.filter-dropdown-menu li.cate6 { border-left: 4px solid #A9EEB8; }/*デイサービスセンター サンテラス*/
.filter-dropdown-menu li.cate7 { border-left: 4px solid #E0E0E0; }/*津島中央病院指定居宅介護支援事業所*/
.filter-dropdown-menu li.cate8 { border-left: 4px solid #A9EEDF; }/*アメニティつしま指定居宅介護支援事業所*/
.filter-dropdown-menu li.cate9 { border-left: 4px solid #EEA9D6; }/*津島市北地域包括支援センターさくら*/

/* プルダウンのホバー時に各カテゴリの背景色に変更 */
.filter-dropdown-menu li.cate0:hover { background-color: #EEA9A9; color: #333; }/*すべて*/
.filter-dropdown-menu li.cate1:hover { background-color: #FCFAAC; color: #333; }/*津島中央病院*/
.filter-dropdown-menu li.cate2:hover { background-color: #8CD9CD; color: #333; }/*老人保健施設 第一アメニティつしま*/
.filter-dropdown-menu li.cate3:hover { background-color: #A9C2EE; color: #333; }/*介護老人保健施設 パビリオン*/
.filter-dropdown-menu li.cate4:hover { background-color: #F5CDA9; color: #333; }/*グループホーム ぬくもり*/
.filter-dropdown-menu li.cate5:hover { background-color: #D4A9EE; color: #333; }/*グループホーム ふるかわ*/
.filter-dropdown-menu li.cate6:hover { background-color: #A9EEB8; color: #333; }/*デイサービスセンター サンテラス*/
.filter-dropdown-menu li.cate7:hover { background-color: #E0E0E0; color: #333; }/*津島中央病院指定居宅介護支援事業所*/
.filter-dropdown-menu li.cate8:hover { background-color: #A9EEDF; color: #333; }/*アメニティつしま指定居宅介護支援事業所*/
.filter-dropdown-menu li.cate9:hover { background-color: #EEA9D6; color: #333; }/*津島市北地域包括支援センターさくら*/

/* お知らせコンテンツエリア（白背景） */
#index .news-content,
#second.szk .news-content {
    padding-bottom: 62px;
}
.news-content {
    background-color: #ffffff;
    padding: 20px;
}

.news-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.news-list li,
#second.szk .news-list li:last-child {
    border-bottom: 1px dotted #8cd9cd; /* 破線 */
    position: relative;
}

.news-list li:last-child {
    border-bottom: none;
}

.news-list li a {
    display: block;
    padding: 15px 40px 15px 10px;
    text-decoration: none;
    color: #333;
    position: relative;
    transition: background-color 0.2s;
}

.news-list li a:hover {
    background-color: #e5f6f4;
}

/* 右下の矢印（アイコン） */
.news-list li a::after {
    content: '';
    position: absolute;
    right: 15px;
    bottom: 25px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
    transform: rotate(-45deg);
}

/* 日付とカテゴリラベルのまとまり */
.news-meta {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.news-meta time {
    font-weight: bold;
    font-size: 16px;
    margin-right: 20px;
}

/* カテゴリラベルの共通設定 */
.cat-label {
    padding: 5px 25px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: bold;
    color: #333;
    text-align: center;
}

/* カテゴリラベルの背景色 */
.cat-label.cate0 { background-color: #EEA9A9; }
.cat-label.cate1 { background-color: #FCFAAC; }
.cat-label.cate2 { background-color: #8CD9CD; }
.cat-label.cate3 { background-color: #A9C2EE; }
.cat-label.cate4 { background-color: #F5CDA9; }
.cat-label.cate5 { background-color: #D4A9EE; }
.cat-label.cate6 { background-color: #A9EEB8; }
.cat-label.cate7 { background-color: #E0E0E0; }
.cat-label.cate8 { background-color: #A9EEDF; }
.cat-label.cate9 { background-color: #EEA9D6; }

/* タイトルテキスト */
.news-title {
    margin: 0;
    line-height: 1.6;
    font-size: 15px;
}

/* ページネーション */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;   
    margin-top: 2rem;
}

.pagination > * {
    margin: 0 0.25rem 0.5rem;
}

.pagination a, .pagination span {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid #EEA9A9;
    border-radius: 29px;
    color: #333;
    text-decoration: none;
}

.pagination span.current {
    background-color: #EEA9A9;
}

.pagination span.dots {
    border: none;
}

.pagination a:hover {
    background-color: #faeaea;
}

/* スマートフォン対応 */
@media screen and (max-width: 768px) {
    .news-wrapper {
        padding: 15px;
    }
    .news-meta {
        flex-direction: column;
        align-items: flex-start;
    }
    .news-meta time {
        margin-bottom: 10px;
    }
    .news-tabs li {
        padding: 8px 12px;
        font-size: 12px;
    }
}


/* お知らせ詳細ページ */
.news-date-title{
    font-size: 110%;
    border-left: solid 5px #8CD9CD;
    font-weight: bold;
    padding: 5px 10px;
    background-color: #fff;
}