.pagination-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.pagination-buttons a,
.pagination-buttons span {
    padding: 6px 14px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
}

.pagination-buttons span {
    background-color: #eee;
    cursor: default;
}


/* 検索画面 */
.look_search_form{
    text-align: right;
}

.input_search_text, .input_search_bt{
    font-size: 20px;
}

.input_search_bt{
    cursor: pointer;
}

/* 記事一覧の画像 */
.look_articles_img{
    height: 150px;
    width: 300px;
    border: 2px solid black;
}

.look_articles_img_td{
    width: 300px;
}

.look_articles_title{
    padding-left: 20px;
    font-size: 20px;
}


/* 入門編はこちら ユーザーフォーム編はこちら--------------------------------------------- */
.intro-link {
    display: inline-block;
    padding: 10px 20px; /* 内側の余白を追加してボタン風に */
    background-color: #5352ed; /* 背景色を目立つ色に */
    color: #fff; /* テキストを白く */
    margin-left: 20px;
    text-decoration: none; /* 下線を削除 */
    border-radius: 5px; /* 角を丸く */
    font-weight: bold; /* 太字にして視認性をアップ */
    transition: background-color 0.3s ease; /* ホバー時の変化をスムーズに */
}

.intro-link:hover {
    background-color: #3742fa; /* ホバー時に色を少し変える */
}

/* ---------------------------------------------入門編はこちら ユーザーフォーム編はこちら */

/* --- スマホ用スタイル（画面幅767px以下） --- */
@media screen and (max-width: 767px) {

    /* 記事一覧の画像 */
    .look_articles_img{
        height: 60px;
        width: 100px;
    }

    .look_articles_img_td{
        width: 100px;
    }

    .look_articles_title{
        padding-left: 0px;
        font-size: 16px;
    }


    .look_articles_img_td{
        width: 120px;
    }

    /* 検索画面 */
    .look_search_form{
        text-align: center;
    }

}