/* ------------------------
   ベース（PC）
------------------------ */
.whatsnew {
    max-width: 960px;
    margin: 0 auto 20px auto;
    padding: 10px 20px;
    box-sizing: border-box;
}

.whatsnew table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto; /* 内容に応じて列幅 */
}

.whatsnew td {
    padding: 8px 10px;
    vertical-align: top;
    word-break: break-word; /* 長文折り返し */
}

.whatsnew td.date {
    width: 100px; /* 日付列固定 */
    white-space: nowrap;
    font-weight: bold;
    color: #4461b1;
}



.pager {
    margin-top: 15px;
    display: flex;
    justify-content: flex-start; /* 左寄せ */
    gap: 10px;
}

.button {
    /* テキスト設定 */
    color: white; 
    font-size: 12px; 
    font-weight: bold; 
    
    /* 横長にするためのパディング */
    padding: 12px 40px; 
    
    border: none; 
    
    /* 角丸と影 */
    border-radius: 25px; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 

    /* グラデーションと色 */
    background: linear-gradient(to bottom, #7a9ce5, #4c6abf); 
    
    /* ホバー時のカーソル変更 (追加) */
    cursor: pointer; 
}



/* ------------------------
   モバイル対応
------------------------ */
@media screen and (max-width: 767px) {

    .whatsnew {
        padding: 10px;
        margin: 0 10px 20px 10px;
    }

    .whatsnew table {
        width: 100%;
        table-layout: fixed; /* 列幅固定して折り返し可能に */
    }

    .whatsnew td.date {
        width: 30%;
        white-space: nowrap;
        font-weight: bold;
        color: #4461b1;
    }

    .whatsnew td.contents {
        width: 70%;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* ページャを縦並び or 左右いっぱいに調整 */
    .pager {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .pager .button {
        width: 100%;
        padding: 10px 0;
        font-size: 16px;
    }
}