.news-detail{
    background:#fff;
    color:#000;
    border-radius:16px;
    padding:56px;
    margin-top:48px;
    margin-bottom:48px;
}

.news-detail time.date{
    white-space:nowrap;
}

.news-detail .meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:16px;
    font-size:.95rem;
    color:#666;
}

.news-detail .cat{
    display:inline-block;
    white-space:nowrap;
    padding:4px 16px;
    /* 2026-09-13 一覧に合わせてブルーに */
    background:#007ec6;
    color:#fff;
    border-radius:999px;
    line-height:1.2;
}

.news-detail h1{
    font-size:2.2rem;
    line-height:1.5;
    margin-bottom:40px;
    font-weight:700;
}

.news-detail .thumbnail{
    margin-bottom:40px;
}

.news-detail .thumbnail img{
    display:block;
    width:100%;
    /* 2026-10-06 16:9・cover に固定（半導体センターのお知らせ詳細に合わせた）。
       img に width/height 属性が付くため、height を auto に戻さないと
       高さが属性の値（609px など）のまま残り、スマホで縦に引き伸ばされる。 */
    height:auto;
    aspect-ratio:16/9;
    object-fit:cover;
    object-position:center;
    border-radius:12px;
}

/* 本文（.content）の中身のスタイルは css/page.css の .entry-content に一本化しました。
   固定ページとお知らせ詳細で同じ見た目にするためです（2026-09-12）。
   ここに .news-detail .content ... を書くと詳細度で page.css を上書きしてしまうので注意。 */

.news-nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    margin-top:48px;
}

.news-nav>div{
    flex:1;
}

.news-nav .back{
    text-align:center;
}

.news-nav .next{
    text-align:right;
}

.news-nav a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:180px;
    height:52px;
    padding:0 24px;
    border-radius:999px;
    background:#fff;
    color:#000;
    text-decoration:none;
    transition:.2s;
}

.news-nav a:hover{
    background:#007ec6;
    color:#fff;
}


/* ============================================================
   スマホ表示（2026-09-13 追加）

   このファイルにはメディアクエリが1つも無く、デスクトップ用の値が
   そのままスマホに出ていた。カードの内側余白56px・見出し2.2rem・
   前後ナビの min-width:180px×3 が原因で、狭い画面で大きく崩れていた。
   ============================================================ */

@media screen and (max-width:640px){

    .news-detail{
        padding:24px 20px;
        border-radius:12px;
        margin-top:32px;
        margin-bottom:32px;
    }

    .news-detail .meta{
        gap:8px;
        margin-bottom:12px;
        font-size:.8125rem;
    }

    .news-detail .cat{
        padding:4px 12px;
        font-size:.8125rem;
    }

    .news-detail h1{
        font-size:1.375rem;
        margin-bottom:24px;
    }

    .news-detail .thumbnail{
        margin-bottom:24px;
    }

    .news-detail .thumbnail img{
        border-radius:8px;
    }

}

/* ------------------------------------------------------------
   前後ナビだけブレークポイントが 767px なのは意図的。

   横並びに必要な幅は実測で 764px。
     ボタン 180px(min-width) + padding 48px = 228px。これが3つ
     + gap 24px + gap 24px + セクション左右余白 16px + 16px
   サイト標準の 640px で切ると 641px から 767px の帯でだけボタンが
   右にはみ出し、ページ全体に横スクロールが出ていた
   （641px幅で実測 scrollWidth 748px）。
   ------------------------------------------------------------ */
@media screen and (max-width:767px){

    .news-nav{
        flex-direction:column;
        gap:12px;
        margin-top:32px;
    }

    .news-nav>div{
        width:100%;
        text-align:center;
    }

    .news-nav a{
        display:flex;
        width:100%;
        min-width:0;
        height:48px;
        padding:0 16px;
        /* content-box のままだと width:100% に padding 32px が上乗せされ、
           カードより 32px 幅広くなって画面端に接するため */
        box-sizing:border-box;
    }

}

@media screen and (max-width:480px){

    .news-detail{
        padding:20px 16px;
    }

    .news-detail h1{
        font-size:1.25rem;
    }

}