@charset "utf-8";
/* =============================================================================
 * stf-a11y.css  —  新着情報タブの見やすさ・押しやすさの改善（改善案B）
 * 2026-09-17 新規作成
 *
 * 【このファイルを外せば、すべて元の見た目に戻ります】
 * RHead.php の <link> 1行を消すだけです。PHPの動作には一切関係しません。
 *
 * 改善前の実測値（いずれも高齢の利用者に影響する箇所）
 *   ・タブの当たり判定 64×26px … 推奨44×44pxの59%
 *   ・選択中タブ #ff2143 の文字コントラスト 3.78:1 … WCAG AA基準 4.5:1 未達
 *   ・選択状態が「色」だけで示され、下線は transparent で機能していない
 *   ・記事タイトル16px・行間1.5、リンクに下線なし
 *
 * 適用範囲は #nav-tab（タブ）と #nav-tabContent（一覧）に限定している。
 * 同じ class は event/ や infodetail.php でも使われているため、
 * それらに影響が及ばないよう ID で囲っている。
 * ========================================================================== */


/* --- 1) タブをボタンにする ------------------------------------------------ */
/*     高さ48px以上を確保し、枠線で1つ1つの境界を明示する。                   */
#nav-tab {
    border-bottom: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

#nav-tab .nav-link,
#nav-tab .nav-item.nav-link {
    min-height: 48px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 12px 22px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    color: #222222;
    background: #f4f4f4;
    border: 2px solid #cccccc;
    border-radius: 6px;
    text-decoration: none;
}

/* 選択中は「濃い赤の背景＋白文字＋太字＋下端の線」で示す。
   色だけに頼らないため、色の見分けがつきにくい方にも伝わる。        */
#nav-tab .nav-link.active,
#nav-tab .nav-item.nav-link.active {
    color: #ffffff;
    background: #d6002e;   /* 白文字とのコントラスト 5.39:1（基準達成） */
    border-color: #d6002e;
    font-weight: 700;
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25);
}

#nav-tab .nav-link:hover:not(.active) {
    color: #111111;
    background: #e9e9e9;
    border-color: #999999;
}

/* キーボード操作時にどこにいるか分かるようにする */
#nav-tab .nav-link:focus-visible,
#nav-tabContent a:focus-visible {
    outline: 3px solid #0b62b0;
    outline-offset: 2px;
}


/* --- 2) 記事1件をカードにする --------------------------------------------- */
/*     同じ行のカードは高さを揃える。
 *
 *     Bootstrap の .row は display:flex なので「列」は行の高さまで伸びるが、
 *     その中のカードは中身の高さしか無く、タイトルが1行の記事と2行の記事で
 *     カードの下端がずれていた（実測 131px と 163px）。
 *     列を flex にして、カードを列いっぱいに伸ばす。
 *
 *     見出しの列は col-xl-10 なのでこの指定は当たらない（記事のみが対象）。 */
#nav-tabContent .row > .col-xl-6 {
    display: flex;
}

#nav-tabContent .whats-news-single {
    width: 100%;
    margin-left: 0;
    margin-bottom: 14px !important;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 8px;
}


/* --- 3) カテゴリ名と日付の行 ----------------------------------------------- */
/*     サイトの既存配色に合わせ、カテゴリ名は色分けせず中間色のラベルにする。 */
#nav-tabContent .whats-news-single .whates-caption > span {
    display: block;
    font-size: 15px;
    line-height: 1.9;
    color: #444444;
}

/* カテゴリ名は <font style="color:#000000;"> で出力されているため
   インライン指定を !important で上書きする。                       */
#nav-tabContent .whates-caption > span font {
    display: inline-block;
    padding: 2px 10px;
    font-size: 15px;
    font-weight: 700;
    color: #333333 !important;
    background: #f1f1f1;
    border: 1px solid #d6d6d6;
    border-radius: 4px;
}

/* アイコンの色を濃くして、背景とのコントラストを確保する */
#nav-tabContent .whates-caption .fa-file-alt {
    color: #117a8b !important;
}
#nav-tabContent .whates-caption .fa-file-pdf {
    color: #c82333 !important;
}

/* PDFへのリンクは、アイコンだけでなく文言でも知らせる。
   （押した先でPDFが開くことが事前に分かるようにするため）
   カテゴリ名と日付の位置を行ごとに揃えたいので、この札は日付の「後ろ」に出す。
   出力は Rcateinclude.inc / RcateincludeNew.inc 側で日付の末尾に付けている。 */
#nav-tabContent .whates-caption .stf-pdf-note {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 8px;
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.5;
    color: #c82333;
    background: #ffeaee;
    border: 1px solid #c82333;
    border-radius: 4px;
    vertical-align: middle;
    white-space: nowrap;
}


/* --- 4) 記事タイトル ------------------------------------------------------- */
/*     文字を大きく、行間を広く、下線でリンクと分かるようにする。
       block 表示にして、行全体が押せる面積になるようにする。        */
#nav-tabContent .whats-news-single .whates-caption h4 {
    margin: 8px 0 0;
}

#nav-tabContent .whats-news-single .whates-caption h4 a {
    display: block;
    padding: 4px 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.78;
    color: #1a1a1a;
    text-decoration: underline;
    text-underline-offset: 4px;
}

#nav-tabContent .whats-news-single .whates-caption h4 a:hover {
    color: #a3001f;
    text-decoration-thickness: 2px;
}


/* --- 5) スマートフォン ----------------------------------------------------- */
@media (max-width: 767px) {
    #nav-tab {
        gap: 8px;
    }
    #nav-tab .nav-link,
    #nav-tab .nav-item.nav-link {
        padding: 11px 16px;
        font-size: 17px;
    }
    #nav-tabContent .whats-news-single {
        padding: 14px 16px;
        margin-bottom: 12px !important;
    }
    #nav-tabContent .whats-news-single .whates-caption h4 a {
        font-size: 18px;
        line-height: 1.78;
    }
}