html {
    scroll-behavior: smooth;
    text-align: justify;

    /* 2026-09-14 ページ内リンク（#section-xxx）の着地位置。
       ヘッダーが position:fixed なので、指定が無いとセクションの上端が
       画面のいちばん上に来てしまい、ヘッダーの下に潜って見出しが隠れる。
       実測でヘッダーは 641px以上で118px / 640px以下で62px なので、
       その分だけ手前で止める。
       scroll-padding-top はスクロール側に付ける指定なので、
       リンククリック・URLに#付きで直接アクセス・戻る の全部に効く。 */
    scroll-padding-top: 118px;

    @media screen and (max-width:640px){
        scroll-padding-top: 62px;
    }

    /* 2026-09-13 横スクロールの保険。
       フッターのロケットの煙(.top-rocket::after)のように、意図的に画面外へ
       はみ出させている装飾がいくつかある。個別に footer{overflow-x:clip} で
       押さえてはいるが、1箇所でも漏れるとページ全体が横に振れてしまうため
       ここでも止める。
       hidden ではなく clip なのは、hidden がスクロールコンテナを作ってしまい
       scroll-behavior:smooth と #page-top へのアンカーが効かなくなるため。
       clip はスクロールコンテナを作らないので両方生きる。 */
    overflow-x: clip;
}

body {
    position: relative;
    /* 2026-09-13 下地を黒に。
       各セクションは自前で背景を塗っているが body は無色（＝白）だったため、
       セクションの境目が端数ピクセルになると白い線が透けて見えていた（iOS Safari）。 */
    background-color: #000;
    font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    line-height: 2;

    @media screen and (max-width:480px){
        font-size: 0.875rem;
    }
}

.db {
    display: block;
}

.tmp-h3 {
    font-family: "Bebas Neue", sans-serif;
    font-size: 4rem;
    padding-left: 12px;
    padding-right: 12px;
    width: fit-content;
    letter-spacing: 0.1em;
    line-height: 1;
    text-align: center;

    @media screen and (max-width:480px){
        font-size: 2.5rem;
    }
}

.tmp-h3.left {
    text-align: left;
}

.tmp-h3 .jp {
    display: block;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    border-top: solid 2px;
    padding: 36px 56px 0px;
    margin-top: 4px;
    @media screen and (max-width:640px){
        padding: 36px 16px 0px;
    }
    @media screen and (max-width:480px){
        font-size: 1.125rem;
        padding: 24px 8px 0px;
    }
}

.tmp-h3.left .jp {
    padding: 36px 0px 0px;
    @media screen and (max-width:480px){
        padding: 24px 0px 0px;
    }
}

/*============================
スクロール連動フェードイン
============================*/
.fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.fade-in.is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .fade-in,
    .fade-in.is-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}








nav.news-list {
}

nav.news-list ul {
}

nav.news-list ul li {
    margin-bottom: 20px;
}

nav.news-list ul li a {
    display: block;
    text-decoration: none;
    color: #000;
    padding: 24px 120px 24px 24px;
    border-radius: 12px;
    background: no-repeat right 64px center url(../img/dir_right.svg) #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    @media screen and (max-width:640px){
        padding: 20px;
        background-position: right 20px bottom 20px;
        background-size: 16px;
    }
}

nav.news-list ul li a:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

nav.news-list ul li a dl {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;

    @media screen and (max-width:640px){
        /* 2026-09-13 column → column-reverse。
           HTMLの並びは [テキスト → 画像] なので、reverse で画像が上・テキストが下になる */
        flex-direction: column-reverse;
    }
}

nav.news-list ul li a dl div.text {
    width: 100%;
    margin-left: 56px;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;

    @media screen and (max-width:640px){
        margin-left: 0;
        /* 画像が上に来たので、余白も下ではなく上に付ける */
        margin-top: 12px;
    }
}

nav.news-list ul li a dl div.text dt {
    /* 2026-09-13 指定により16px固定（旧 1.25rem＝20px / 640以下 1.125rem＝18px） */
    font-size: 16px;
    line-height: 1.6;

    @media screen and (max-width:640px){
        line-height: 1.5;
    }
}

nav.news-list ul li a dl div.text div.sub {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
}

nav.news-list ul li a dl div.text div.sub dd.date {
}

nav.news-list ul li a dl div.text div.sub dd.cat {
    /* 2026-09-13 グレー(#b3b3b3) → サイトのブルー */
    background-color: #007ec6;
    padding: 4px 24px;
    color: #fff;
    border-radius: 3px;
    line-height: 1;

    @media screen and (max-width:640px){
        padding: 4px 16px;
        font-size: .875rem;
    }
}

nav.news-list ul li a dl dd.img {
    max-width: 206px;
    width: 100%;
    background-color: #f1f1f1;
    /* 2026-10-06 4/3 → 16/9。半導体センターのお知らせ一覧に合わせた */
    aspect-ratio: 16/9;
    border-radius: 4px;

    @media screen and (max-width:640px){
        max-width: 100%;
    }
}

nav.news-list ul li a dl dd.img img {
    display: block;
    width: 100%;
    height: 100%;
    /* 2026-10-06 contain → cover（枠いっぱいに表示。半導体センターに合わせた） */
    object-fit: cover;
    object-position: center;
    border-radius: 4px;
}

/* アイキャッチ未設定（NO IMAGE）のときは隙間が出ないようcoverにする
   ※ 2026-10-06 から上の指定も cover なので、現在は同じ指定の重ね掛け */
nav.news-list ul li a dl dd.img.noimage img {
    object-fit: cover;
}

.pagination {
    margin-top: 64px;
    display: flex;
    justify-content: center;
}

.pagination .nav-links {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pagination .page-numbers {
    min-width: 48px;
    height: 48px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 1px #000;
    border-radius: 999px;
    color: #000;
    text-decoration: none;
    background: #fff;
    transition: .2s;
    box-sizing: border-box;
}

.pagination .page-numbers:hover {
    background: #000;
    color: #fff;
}

.pagination .page-numbers.current {
    background: #000;
    color: #fff;
    pointer-events: none;
}

.pagination .prev,
.pagination .next {
    padding: 0 24px;
}

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

    .pagination{
        margin-top:40px;
    }

    .pagination .nav-links{
        gap:8px;
    }

    .pagination .page-numbers{
        min-width:40px;
        height:40px;
        padding:0 14px;
        font-size:.875rem;
    }

    .pagination .prev,
    .pagination .next{
        padding:0 16px;
    }

}