/* FILTER WRAPPER */
.filter_wrapper {
    padding: 0 0 120px;
    background: #ffffff;
}

.filter_wrapper_news {
    margin-top: 60px;
}

.filter_inner {
    margin: 0 auto;
}

.filter_tabs {
    display: flex;
    align-items: center;
    /* 収まる時は中央寄せ、はみ出す時は左寄せ（ALLが左端に来る）に自動切替。
       overflow-x:auto と justify-content:center を併用すると左側がスクロールで
       戻れなくなるFlexboxの不具合を safe で回避 */
    justify-content: safe center;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    background: #ECECEC;
}

.filter_tab {
    position: relative;
    flex: 0 0 auto;
    min-width: 61px;
    padding: 14px 15px;
    border: 0;
    border-right: 1px solid #bcbcbc;
    background: #efefef;
    color: #111111;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.filter_tab::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 3px;
    background: var(--tab-color, #0d0f5b);
}

.filter_tab.is-active {
    background: #ffffff;
}

.filter_news_list {
    max-width: 1300px;
    margin: 0 auto;
    background: #ffffff;

    .filter_news_empty {
        text-align: center;
        margin: 50px auto;
    }
}

.filter_news_item {
    display: grid;
    grid-template-columns: 190px 1fr;
    align-items: center;
    column-gap: 28px;
    padding: 27px 66px 25px;
    border-bottom: 1px solid #d7d7d7;
}

.filter_news_meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding-top: 3px;
    white-space: nowrap;
}

.filter_news_date {
    padding-top: 5px;
    color: #000;
    font-family: 'din-condensed-bold';
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.filter_news_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 18px;
    padding: 5px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.cat_academy {
    background-color: #ca4949;
}

.cat_goods {
    background-color: #72a64f;
}

.cat_school {
    background-color: #006fb4;
}

.cat_others {
    background-color: #8b8b8b;
}

.cat_ticket {
    color: #000000;
    background-color: #fde965;
}

.cat_topteam {
    background-color: #04003b;
}

.cat_news {
    background-color: #009eb4;
}

.cat_hometown {
    background-color: #c78335;
}

.cat_games {
    background-color: #7a53c0;
}



.filter_news_link {
    color: #000;
    font-size: 16px;
    font-weight: 700;
}

.filter_action_link {
    display: block;
    width: max-content;
    margin: 41px auto 0;
    padding: 11px 32px;
    color: #ffffff;
    background: #0096B2;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
}

.pagination_wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}

.pagination_wrapper .page-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #0098a6;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    height: 40px;
    padding: 0 12px;
    min-width: 40px;
    box-sizing: border-box;
}

.pagination_wrapper .page-number.last-page {
    min-width: 70px;
}

.pagination_wrapper .current-page {
    background-color: transparent;
    color: #333333;
    font-weight: bold;
    font-size: 16px;
    padding: 0 8px;
}

.pagination_wrapper .page-dots {
    color: #666666;
    letter-spacing: 2px;
    padding: 0 4px;
}

/*----------  お知らせ記事 ----------*/
.news_headline{
    padding:40px 0;
    background-color:#001B5B;

    .content{
        max-width:1084px;
        margin:0 auto;
        padding:0 20px;
        box-sizing:content-box;

        .en{
            margin-bottom:5px;
            font-family:"peckham-press", sans-serif;
            font-weight:400;
            font-size:40px;
            line-height:1;
            color:#ffffff;
        }
        .ja{
            font-family:"Noto Sans JP", sans-serif;
            font-weight:700;
            font-size:17px;
            line-height:1;
            color:#ffffff;
        }
    }
}
.news_wrap{
    max-width:1040px;
    margin:60px auto 110px;
    padding:0 20px;
    box-sizing:content-box;
}
.news_header{
    margin-bottom:40px;

    h1{
        margin-bottom:40px;
        font-size:28px;
        font-weight:700;
        line-height:180%;
        color:#04003B;
    }
    .date{
        display:flex;
        align-items:center;
        gap:18px;

        time{
            font-family: 'din-condensed-bold', 'DIN Condensed', sans-serif;
            font-weight: 700;
            font-size:16px;
            letter-spacing: 0.05px;
        }
        .category{
            display:flex;
            align-items:center;
            gap:18px;

            span{
                padding:6px;
                font-size:10px;
                line-height:1;
                color:#ffffff;
            }
        }
    }
}
.news_content{
    p{
        margin-bottom:40px;
        font-size:14px;
        line-height:180%;
    }
    img{
        display:block;
        max-width:100%;
        margin:32px auto 0;
    }
    .tt-border{
        margin-bottom:40px;
        padding-bottom:20px;
        font-weight:700;
        font-size:20px;
        line-height:177%;
        border-bottom:1px solid #000000;
    }
    .ttl-left-bd{
        margin-bottom:32px;
        padding-left:19px;
        font-weight:700;
        font-size:20px;
        line-height:177%;
        border-left:9px solid #001B5B;
    }
    table{
        width:100%;
        margin-bottom:40px;
        border:none;
        border-collapse:collapse;

        tr{
            border-bottom:1px solid #ffffff;

            &:last-child{
                border:none;
            }
            td{
                padding:12.5px 12px 11.5px;
                font-weight:700;
                font-size:14px;
                line-height:100%;
                background-color:#F7F7F7;
                border:none;

                &:first-child{
                    padding-left:14px !important;
                    text-align:left !important;
                    background: linear-gradient(to right, #00799B, #001B5B) !important;
                }
            }
        }
    }
}
.news_share{
    ul{
        display:flex;
        justify-content:center;
        align-items:center;
        gap:10px;

        li{
            list-style:none;

            .fb_iframe_widget span{
                display: block;
                vertical-align:center;
            }
        }
    }
}
.news_more{
    display:flex;
    justify-content:center;
    margin-top:70px;

    a{
        display:block;
        width:100%;
        max-width:240px;
        padding:16px 0;
        font-weight:700;
        font-size:16px;
        line-height:100%;
        color:#ffffff;
        background-color:#02879A;
        text-align:center;
        
        &:hover{
            opacity:0.7;
        }
    }
}

@media(max-width:768px){
    /*----------  お知らせ記事 ----------*/
    .news_headline{
        padding:16px 0 12px;
        
        .content{
            padding:0 20px;
            
            .en{
                margin-bottom:5px;
                font-size:24px;
            }
            .ja{
                font-size:10px;
            }
        }
    }
    .news_wrap{
        margin:24px auto 60px;
        padding:0 20px;
    }
    .news_header{
        margin-bottom:40px;

        h1{
            margin-bottom:40px;
            font-size:20px;
            line-height:160%;
        }
        .date{
            gap:18px;

            time{
                font-size:16px;
                letter-spacing: 0.05px;
            }
            .category{
                display:flex;
                align-items:center;
                gap:9px;

                span{
                    padding:6px;
                    font-size:10px;
                }
            }
        }
    }
    .news_content{
        p{
            margin-bottom:40px;
            font-size:14px;
            line-height:180%;
        }
        img{
            margin:32px auto 0;
        }
        .tt-border{
            margin-bottom:40px;
            padding-bottom:20px;
            font-size:20px;
        }
        .ttl-left-bd{
            margin-bottom:32px;
            padding-left:19px;
            font-size:18px;
            border-left:9px solid #001B5B;
        }
        table{
            margin-bottom:40px;
            
            tr{
                td{
                    padding:16.5px 8px 15.5px;
                    font-size:14px;
                    line-height:100%;
                    
                    &:first-child{
                        padding-left:0 !important;
                        padding-right:0 !important;
                        text-align:center !important;
                    }
                }
            }
        }
    }
    .news_share{
        ul{
            gap:6px;
        }
    }
    .news_more{
        margin-top:70px;

        a{
            padding:16px 0;
            font-size:16px;
        }
    }

    /*----------  ニュースアーカイブ一覧（SP）  ----------*/
    /* index.css の SP 指定を news.css（後読み込み）で上書き。
       ※ news.css はニュース系ページのみ読込のためトップには影響しない */

    /* バナー直下〜フィルタータブ間の余白を削除 */
    .filter_wrapper_news {
        margin-top: 0;
    }

    /* 記事ごとの上下余白を削除して詰める（左右は filter_news_list の 16px を維持）。
       併せて1カラム化：news.css のベース指定(190px 1fr)が index.css の SP(1fr)を
       後勝ちで打ち消してしまうため、ここで明示的に1カラムへ戻してタイトルを全幅にする。
       （タイトル=grid-row:1 / 日付バッジ=grid-row:2 は index.css SP の指定が効く） */
    .filter_wrapper_news .filter_news_item {
        grid-template-columns: 1fr;
        column-gap: 0;
        padding: 8px 0;
    }
}