/* 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{
    /* add CSSで担当者が独自クラスの要素(divなど)を追加した場合の既定の下余白。
       :where()で詳細度を0にしているため、p/見出し/リスト/表など
       下記で個別指定している要素はそれぞれの余白が優先される。
       add CSS側でmarginを書けばそちらが優先される(通常の上書き) */
    > :where(:not(:last-child):not(.table-scroll)){
        margin-bottom:16px;
    }
    p{
        margin-bottom:40px;
    }
    /* 本文テキストの基準サイズ。p以外(add CSSで使うdivやdl等)にも同じ見た目を適用する。
       :where()で詳細度を0にしているため、add CSS側でfont-sizeや行間を
       指定した場合は必ずそちらが優先される(以前はテーマのp指定が勝って効かなかった) */
    :where(p, div, dl, dt, dd, blockquote, address, figcaption){
        font-size:14px;
        line-height:180%;
    }
    /* 見出し。共通リセットでマージン0のため下余白を追加。
       本文の段落余白(40px)より小さくし「見出し+続く本文」のセット感を出す */
    h1{
        margin-bottom:24px;
    }
    h2{
        margin-bottom:20px;
    }
    h3{
        margin-bottom:16px;
    }
    h4{
        margin-bottom:12px;
    }
    /* 箇条書き・番号付きリスト。
       共通リセット(*{margin:0;padding:0})でULの左パディングが0になり、
       マーカー(・や数字)がコンテナ左へはみ出すため、パディングを戻す。
       入れ子リスト(エディタのインデント)は左パディングの分だけ字下げされる */
    ul,ol{
        margin-bottom:40px;
        padding-left:1.5em;
        font-size:14px;
        line-height:180%;

        ul,ol{
            /* 入れ子リストは段落下余白なし(親リストの続きのため) */
            margin-bottom:0;
        }
    }
    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{
                /* 行送りを1em+5pxにした分、上下パディングを2.5pxずつ詰めて
                   1行セルの高さは従来(38px)と同じに保つ */
                padding:10px 12px 9px;
                font-weight:700;
                font-size:14px;
                /* 改行(折り返し・br・空行)の行間を5pxにする */
                line-height:calc(1em + 5px);
                vertical-align:middle;
                color:#000000;
                background-color:#F7F7F7;
                border:none;

                /* セル内の空行・<br><br>はWPの整形処理で段落(<p>)区切りに変換される。
                   本文用の p { margin-bottom:40px } を打ち消しつつ、
                   段落の前に1行分(1em+5px)の空きを設けて「空行」として見せる。
                   (改行1回=<br>は行間5px、<br><br>・空行=1行空き、という使い分け) */
                p{
                    margin:calc(1em + 5px) 0 0;
                    font-size:inherit;
                    line-height:inherit;
                }

                /* A列(1列目)のセル。single.php のJSが rowspan/colspan を
                   計算して本当の1列目にだけ .is-col-a を付与する。
                   (:first-child だと縦結合行でB列に誤適用されるため)
                   ※ !important は付けない。classic editorで設定した
                     セル背景色・文字色を優先して上書きできるようにするため */
                &.is-col-a{
                    padding-left:14px;
                    text-align:left;
                    color:#ffffff;
                }
                /* 青グラデはエディタで背景色を設定していないセルのみに適用。
                   (グラデはbackground-imageのため、インラインのbackground-colorでは
                    上書きできず、この条件分けが必要) */
                &.is-col-a:not([style*="background"]){
                    background: linear-gradient(to right, #00799B, #001B5B);
                }
            }
        }
    }
}
.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/line-heightはPC側の :where() 基準指定を継承
               (add CSSの指定を優先させるため、ここでは指定しない) */
        }
        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{
                    /* PC側と同様、行送り1em+5pxの分パディングを詰めて
                       1行セルの高さは従来(46px)と同じに保つ */
                    padding:14px 8px 13px;
                    font-size:14px;
                    line-height:calc(1em + 5px);

                    /* A列セル(.is-col-a)はPC側と同じくJSで付与される。
                       エディタのインライン指定を優先するため !important なし。
                       左右パディング0だと文字数が多いときに端まで詰まるため8px確保 */
                    &.is-col-a{
                        padding-left:8px;
                        padding-right:8px;
                        text-align:center;
                    }
                }
            }
        }

        /* 3列以上(3列目のセルが存在する)の表だけ、スマホで横スクロールさせる。
           single.php のJSで全ての表は .table-scroll でラップ済み。
           :has(:nth-child(3))で列数を判定し、2列以下は対象外＝従来どおり縦に収まる。
           (下層ページテンプレート template.css と同じ方式) */
        .table-scroll:has(td:nth-child(3)),
        .table-scroll:has(th:nth-child(3)){
            overflow-x:auto;
            /* 縦方向はスクロールさせない(x指定だけだとyがautoに昇格するため明示) */
            overflow-y:hidden;
            -webkit-overflow-scrolling:touch;
        }
        .table-scroll:has(td:nth-child(3)) > table,
        .table-scroll:has(th:nth-child(3)) > table{
            /* セルを折り返さず本来の幅を保たせ、ビューポートをはみ出させてスクロールを発生させる */
            white-space:nowrap;
            width:auto;
            min-width:100%;
        }
    }
    .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;
    }
}